1

Dentro de VueJS tenemos dos opciones para manipular los datos que están al alcance de nuestra instancia de VueJS:

  1. Computed properties
  2. Methods(functiones del modo en que ya las conocemos)

EJEMPLO DE METHODS

    let app = new Vue({
      el: '#app',
      data:{
        valor: 0
      },
      methods:{
        aumenta(){
          return console.log(this.valor)
        }
      },
      created(){
        this.aumenta()
      }
    })

Que se invoca así

<button @click="aumenta(valor += 1)">Métodos</button>

EJEMPLO DE COMPUTED PROPERTIES

    let app = new Vue({
      el: '#app',
      data:{
        valor: 0
      },
      computed:{
        aumenta: function(){
          return console.log(this.valor += 1)
        }
      },
      created(){
        this.aumenta()
      }
    })

Que se invoca así

<div id="app">
  {{ this.aumenta }}
</div>

Sin embargo:

  1. ¿Una computed property acepta parámetros?
  2. ¿Una computed property puede ser invocada como una función de la etiqueta methods?

2 respuestas 2

3

Vamos a observar a través de 2 ejemplos las similitudes y diferencias entre una computed property y las funciones dentro de methods

EJEMPLO DE METHODS CON UN PARÁMETRO

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <div id="app">
      <button @click="saludar('SO  en español')">Mostrar mensaje de saludo</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
          el: '#app',
          data:{
            message: "Hola hola: "
          },
          methods:{
            saludar: function(comunidad){
              return console.log(this.message+comunidad)
            }
          }
        })
    </script>
    </body>
    </html>

Del ejemplo anterior podemos notar lo siguiente:

  1. La función saludar, que se encuentra dentro de la etiqueta methods, acepta parámetros
  2. El parámetro es pasado en la invovación de la función
  3. Para que la funcionalidad de saludar() se observe debemos asociarla a un evento que sea disparado por el usuario; en este caso el evento click con la sintáxis acortada de @click()

EJEMPLO DE COMPUTED PROPERTIES

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="app">
  {{ this.myName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
      el: '#app',
      data:{
        valor: 0,
        name: 'Alfredo P'
      },
      computed:{
        myName: function(){
          return this.name
        }
      },
      created(){
        this.myName()
      }
    })
</script>
</body>
</html>

Del ejemplo anterior podemos notar lo siguiente:

  1. Una computed property no acepta parámetros
  2. Una computed property no puede ser llamada, por que se ha vuelto como una propiedad; entonces solo requerimos invocarla así {{ this.myName }}
1
  • Además mencionar que las computed properties trabajan algunos valores en caché mientras que los métodos siempre serán recalculados en su totalidad. Esto quiere decir que si manejarás reactivamente una gran cantidad de datos, lo ideal es siempre responder a ello con una propiedad computada y no un método. Commented el 23 nov. 2019 a las 14:03
1

Para responderte este tipo de preguntas deberías ir a la documentación oficial siempre.

Hay varias maneras de manipular los datos en una instancia de Vue, no solo las computed properties y los methods, de hecho puedes usar ambos y no modificar los datos de tu instancia. En cualquier punto de la ejecución de tu programa puedes manipular los datos de tu instancia de Vue.

La principal ventaja de las computed properties vs methods es que se guardan en caché basado en sus dependencias. Es decir, las computed properties solo son invocadas en caso de que alguna propiedad sobre la cual dependen cambie su valor, lo cual gana mucho en eficiencia, sin embargo los methods siempre se llaman cuando se vuelve a renderizar la instancia de Vue.

Las computed properties no pueden ser llamadas con parámetros, puesto que se muestran en la instancia de Vue como propiedades y no como métodos y su objetivo no es suplir la necesidad de un método, sino ganar en claridad y eficiencia con respecto a una lógica muy compleja escrita en la vista.

Para más información: Documentacion Oficial.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.