Método vs Calculado en SDV
Cuál es la diferencia principal entre un método y un valor calculado en Vue.js?
Se ven iguales e intercambiables.
4 answers
Los valores y métodos calculados son muy diferentes en el SDV y definitivamente no son intercambiables en la mayoría de los casos.
Propiedad calculada
Un nombre más apropiado para un valor calculado es propiedad calculada. De hecho, cuando el Vue es instanciado, las propiedades calculadas se convierten en una propiedad del Vue con un getter y a veces un setter. Básicamente, puede pensar en un valor calculado como un valor derivado que se actualizará automáticamente cada vez que uno de se actualizan los valores subyacentes utilizados para calcularlo. No se llama a un computado y no acepta ningún parámetro. Hace referencia a una propiedad calculada al igual que haría con una propiedad de datos. Este es el ejemplo clásico de la documentación :
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
Que se hace referencia en el DOM de esta manera:
<p>Computed reversed message: "{{ reversedMessage }}"</p>
Los valores calculados son muy valiosos para manipular los datos que existen en su Vue. Siempre que desee filtrar o transformar sus datos, normalmente utilizará a valor calculado para ese fin.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
Los valores calculados también se almacenan en caché para evitar calcular repetitivamente un valor que no necesita ser recalculado cuando no ha cambiado (ya que podría no estar en un bucle, por ejemplo).
Método
Un método es solo una función vinculada a la instancia Vue. Solo se evaluará cuando lo llame explícitamente. Como todas las funciones de javascript, acepta parámetros y será reevaluado cada vez que se llame. Los métodos son útil en las mismas situaciones cualquier función es útil.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.startsWithChar("B")
},
startsWithM(){
return this.startsWithChar("M")
}
},
methods:{
startsWithChar(whichChar){
return this.names.filter(n => n.startsWith(whichCharacter))
}
}
La documentación de Vue es realmente buena y de fácil acceso. Lo recomiendo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-04 05:35:25
Como @gleenk pidió un ejemplo práctico para hacer evidente las diferencias de caché y dependencia entre los métodos y las propiedades calculadas, voy a mostrar un escenario simple:
App.js
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});
Aquí tenemos 2 métodos y 2 propiedades calculadas que realizan la misma tarea. Los métodos addToAmethod & addToBmethod y las propiedades calculadasaddToAcomputed & addToBcomputed todos añaden +20 (es decir, el valor age) a a o b. En cuanto a los métodos, son ambos llamados cada tiempo se ha realizado una acción en cualquier de las propiedades listadas, incluso si las dependencias de un método específico no han cambiado. Para las propiedades calculadas, el código se ejecuta solo cuando una dependencia ha cambiado; por ejemplo, uno de los valores de propiedad específicos que se refiere a A o B activará addToAcomputed o addToBcomputed, respectivamente.
El método y las descripciones computadas parecen bastante similares, pero como @Abdullah Khan ya lo ha especificado, no son lo mismo cosa! Ahora vamos a tratar de añadir algo de html para ejecutar todo junto y ver dónde está la diferencia:
Index.html (para método)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS stackoverflow example</title>
<link href="style.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>Computed Properties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAmethod() }}</p>
<p>Age + B = {{ addToBmethod() }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
El resultado
Cuando hago clic en el botón "Add to A", se llaman todos los métodos (ver el resultado de la pantalla de registro de consola anterior), el addToBmethod() también se ejecuta, pero no presioné el botón "Add to B"; el valor de la propiedad que se refiere a B no ha cambiado. El mismo comportamiento se produce si decidimos hacer clic en el botón "Add to B", porque de nuevo ambos métodos serán llamados independientemente de los cambios de dependencia. De acuerdo con este escenario esto es mala práctica porque estamos ejecutando los métodos cada vez, incluso cuando las dependencias no han cambiado. Esto realmente consume recursos porque no hay una caché para los valores de propiedad que no han cambiado.
Index.html (para propiedad computada)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS stackoverflow example</title>
<link href="style.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>Computed Properties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAcomputed }}</p>
<p>Age + B = {{ addToBcomputed }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
El resultado
Cuando hago clic en el botón "Add to A", solo se llama a la propiedad calculada addToAcomputed porque, como ya hemos dicho, las propiedades calculadas se ejecutan solo cuando una dependencia ha cambiado. Y dado que no presioné el botón "Agregar a B" y el valor de la propiedad age para B no ha cambiado, no hay razón para llamar y ejecutar la propiedad calculada addToBcomputed. Así, en cierto sentido, la propiedad calculada es mantener el" mismo sin cambios " valor para la B propiedad como una especie de caché. Y en esta circunstancia esto es considerar buenas prácticas .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-17 17:17:14
De la docs
..las propiedades calculadas se almacenan en caché en función de sus dependencias. Una propiedad calculada solo reevaluará cuando algunas de sus dependencias hayan cambiado.
Si desea que los datos se almacenen en caché, use propiedades calculadas.Por otro lado, si no desea que los datos se almacenen en caché, use propiedades de método simple.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-04 13:21:53
Propiedades calculadas
Las propiedades computadas también se llaman valor computado. Significa que se actualizan y se pueden cambiar en cualquier momento. Además, almacena en caché los datos hasta que cambian. Cuando se crea una instancia del Vue, las propiedades calculadas se convierten en una propiedad.
Una cosa más que quiero compartir, No puede pasar ningún parámetro en las propiedades calculadas, por eso, al llamar a cualquier propiedad del equipo, no se requieren paréntesis.
Métodos
Métodos son lo mismo que la función y trabajan de la misma manera. Además, un método no hace nada a menos que lo llames. Además, como todas las funciones de javascript, acepta parámetros y será reevaluado cada vez que se llama. Después de eso, no pueden almacenar en caché los valores
En el método que llama a paréntesis está allí y puede enviar uno o más parámetros en ese.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-11 11:07:14