javascript - single - vue router change title
Método vs Computado en Vue (6)
Aquí hay un desglose de esta pregunta.
Cuando usar métodos
- Para reaccionar ante algún evento que ocurra en el DOM
- Llamar a una función cuando algo sucede en su componente.
- Puede llamar a un método desde propiedades calculadas o observadores.
Cuándo usar propiedades calculadas
- Necesita componer datos nuevos de fuentes de datos existentes
- Tiene una variable que usa en su plantilla que está construida a partir de una o más propiedades de datos
- Desea reducir un nombre de propiedad anidado complicado a uno más fácil de leer y leer (pero actualícelo cuando cambie la propiedad original)
- Debe hacer referencia a un valor de la plantilla. En este caso, crear una propiedad calculada es lo mejor, porque está en caché.
- Debe escuchar los cambios de más de una propiedad de datos.
¿Cuál es la principal diferencia entre un método y un valor calculado en Vue.js?
Se ven iguales e intercambiables.
Cuando @gleenk solicitó un ejemplo práctico para hacer evidentes las diferencias de caché y dependencia entre los métodos y las propiedades calculadas, 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 calculadas
addToAcomputed
&
addToBcomputed
agregan +20 (es decir, el valor de
age
) a
a
o
b
.
Con respecto a los métodos,
ambos se
llaman
cada
vez que se realiza una acción en
cualquiera
de las propiedades enumeradas, 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 refieren a A o B activará
addToAcomputed
o
addToBcomputed
, respectivamente.
El método y las descripciones calculadas parecen bastante similares, pero como @Abdullah Khan ya lo ha specified , ¡ no son lo mismo ! Ahora intentemos agregar algunos html para ejecutar todo junto y ver dónde está la diferencia.
El método de demostración de casos
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;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Methods - </title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Methods</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 explicado
Cuando hago clic en el botón
"Agregar a A"
, todos los métodos se llaman (vea el resultado de la pantalla de registro de la consola arriba), también se ejecuta
addToBmethod()
pero no
addToBmethod()
el
addToBmethod()
"Agregar a 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
"Agregar a B"
, porque nuevamente los dos métodos se llamarán independientemente de los cambios de dependencia.
Según este escenario, esta es una
mala práctica
porque estamos ejecutando los métodos cada vez, incluso cuando las dependencias no han cambiado.
Esto realmente consume muchos recursos porque no hay una memoria caché para los valores de propiedad que no han cambiado.
La demostración del caso de propiedad calculada
new Vue({
el: ''#vue-app'',
data: {
a: 0,
b: 0,
age: 20
},
computed: {
addToAcomputed: function(){
console.log(''addToAcomputed'');
return this.a + this.age;
},
addToBcomputed: function(){
console.log(''addToBcomputed'');
return this.b + this.age;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Computed properties - </title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></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 explicado
Cuando hago clic en el botón
"Agregar a A"
, solo se llama a la propiedad calculada
addToAcomputed
porque, como ya dijimos, las propiedades calculadas se ejecutan solo cuando una dependencia ha cambiado.
Y como no presioné el botón
"Agregar a B"
y el valor de propiedad de edad para B no ha cambiado, no hay razón para llamar y ejecutar la propiedad calculada
addToBcomputed
.
Entonces, en cierto sentido, la propiedad calculada mantiene el "mismo valor sin cambios" para la propiedad B como un tipo de caché.
Y en esta circunstancia esto se considera una
buena práctica
.
De los
docs
Las propiedades .computed se almacenan en caché en función de sus dependencias. Una propiedad calculada solo se reevaluará cuando algunas de sus dependencias hayan cambiado.
Si desea que los datos se almacenen en caché, utilice las propiedades calculadas, por otro lado, si no desea que los datos se almacenen en caché, utilice propiedades de método simples.
Los valores y métodos computados son muy diferentes en Vue y definitivamente no son intercambiables en la mayoría de los casos.
Propiedad calculada
Un nombre más apropiado para un valor calculado es una vuejs.org/v2/guide/computed.html#Computed-Properties . De hecho, cuando se instancia la Vue, las propiedades calculadas se convierten en una propiedad de la 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 se actualice uno de los valores subyacentes utilizados para calcularlo. No llama a un cómputo y no acepta ningún parámetro. Hace referencia a una propiedad calculada tal como lo haría con una propiedad de datos. Aquí está el ejemplo clásico de la documentation :
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 así:
<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, generalmente utilizará un valor calculado para ese propósito.
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 el cálculo repetitivo de 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 de Vue. Solo se evaluará cuando lo llame explícitamente. Al igual que todas las funciones de JavaScript, acepta parámetros y se volverá a evaluar cada vez que se llame. Los métodos son útiles 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 documentation de Vue es realmente buena y de fácil acceso. Lo recomiendo.
Uno de diferencia entre computado y método. Supongamos que tenemos una función que devolverá el valor del contador (el contador es solo variable). Veamos cómo se comporta la función tanto en método como en método
Calculada
En el primer momento de ejecución, el código dentro de la función se ejecutará y vuejs almacenará el valor del contador en la memoria caché (para acceder más rápido). Pero cuando volvemos a llamar a la función vuejs no volverá a ejecutar el código escrito dentro de esa función. Primero verifica los cambios realizados en el mostrador o no. Si se realiza algún cambio, solo volverá a ejecutar el código que está dentro de esa función. Si no se realizan cambios en el contador, vuejs no volverá a ejecutar la función. Simplemente devolverá el resultado anterior del caché.
Método
Esto es como un método normal en javascript. Siempre que llamemos al método, siempre ejecutará el código dentro de la función, independientemente de los cambios realizados en el contador.
El método siempre volverá a ejecutar el código independientemente de los cambios en el código. donde, tal como se calculó, volverá a ejecutar el código solo si uno de los valores de su dependencia ha cambiado. De lo contrario, nos dará el resultado anterior del caché sin volver a ejecutar
Propiedades calculadas
Las propiedades calculadas también se denominan valor calculado. Significa que se actualizan y se pueden cambiar en cualquier momento. Además, almacena en caché los datos hasta que cambie. Cuando se instancia la 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, es por eso que al llamar a cualquier propiedad de la computadora no se requiere paréntesis.
Métodos
Los métodos son iguales a la función y funcionan 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 se volverá a evaluar cada vez que se llame. Después de eso, no pueden almacenar en caché los valores
En el método que llama el paréntesis está ahí y puede enviar uno o más parámetros en eso.