La propiedad calculada de Vue
computedes solo una funciónEn pocas palabras, es un atributo que puede almacenar en caché los resultados del cálculo (convertir el comportamiento en atributos estáticos), ¡similar al caché!
Ejemplo de código : aquí hay dos métodos que devuelven la marca de tiempo actual, en el methodsatributo y el atributo calculado computedrespectivamente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>compute</title>
</head>
<body>
<div id="compute">
currentTime1: {
{currentTime1()}} <!--方法-->
<br>
currentTime2: {
{currentTime2}} <!--属性-->
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var vue = new Vue({
el: "#compute",
methods: {
currentTime1: function () {
return Date.now(); //返回当前时间戳
}
},
computed: {
//计算属性computed
currentTime2: function () {
return Date.now();
}
}
})
</script>
</body>
</html>
Nota: los métodos methodsy computeddeben ser únicos
Demostración del efecto :
se puede ver que ambas implementaciones devuelven la marca de tiempo actual. La diferencia:
-
currentTime1 es un método , a través de la
.方法名()llamada, necesita traer paréntesis -
currentTime2 no es un método, pero es una propiedad calculada ,
.属性名llamada directa , sin paréntesis
Una vez que se llama al atributo calculado, se almacena directamente en la memoria caché, por lo que el valor no cambiará cuando se vuelva a llamar
Si lo currentTime2modificamos a:
<script>
var vue = new Vue({
el: "#compute",
data: {
message: "hello"
},
methods: {
currentTime1: function () {
return Date.now(); //返回当前时间戳
}
},
computed: {
//计算属性computed
currentTime2: function () {
this.message;
return Date.now();
}
}
})
</script>
Llamamos currentTime2 en la consola, el valor no cambiará, pero cuando modificamos el valor del mensaje, llamamos de nuevo a currentTime2, en este momento podemos ver que el valor ha cambiado, es decir, recalcular;
-
Aquí
this.messagees para podercurrentTime2cambiar los cambios de datos observados, si el valor en el método cambia, se actualizará y recalculará -
Esto es exactamente lo mismo que el caché, como el caché de MyBatis. El primer cálculo se almacena en el resultado. Una vez que haya adiciones, eliminaciones y cambios, el caché se invalidará inmediatamente y se volverá a calcular
-
Este es el concepto de Dom virtual, que reduce las operaciones DOM reales, simula las operaciones DOM en la memoria y mejora eficazmente la eficiencia de la representación del front-end
Conclusión :
-
Tanto currentTime1 como currentTime2 parecen ser funciones, pero se pueden hacer con la memoria calculando atributos: por ejemplo, al calcular 1 + 1, no es necesario pasar la función para el segundo cálculo, solo obtenga el resultado directamente de la memoria ; esto ahorra el costo del navegador desde un lado; si hay una gran cantidad de llamadas a métodos, el navegador se congelará, pero si se llama desde la memoria, la velocidad será muy rápida
-
Cuando se llama a un método, se requieren cálculos cada vez. Dado que hay un proceso de cálculo, se debe incurrir en gastos generales del sistema. ¿Qué pasa si el resultado no cambia con frecuencia? En este momento, puede considerar almacenar en caché el resultado, lo que se puede hacer fácilmente mediante el uso de atributos calculados. La característica principal de los atributos calculados es almacenar en caché los resultados del cálculo que no cambian con frecuencia para ahorrar la sobrecarga de nuestro sistema;