概述:
computed的计算属性有缓存机制,只有当其依赖的响应式数据发生变化时才会清空缓存重新计算结果,其缓存机制本质是通过一个dirty属性控制的,只有dirty为true时才会重新计算结果替换缓存。dirty只有当其响应式数据发送变化时才会设置为true,重新计算后会再次被设置为false
为什么说计算属性有缓存功能呢,
假设一个template中 {{ computedVal }} // computedVal定义在计算属性中,是a+b
另一个是 {{ a+b }}的 moustache 语法中是一个计算属性,
那么每次render的时候都会计算a+b,而computedVal不会计算,可以直接从computedVal中拿值(对应的一个watcher的value)
<template>
<div>
<button @click="changeValue">更新Value</button>
<button @click="getComputedValue">打印computedValue</button>
</div>
</template>
<script>
export default {
data(){
return {
value: 1
}
},
computed: {
computedValue(){
return this.value + '--' + Math.random()
}
},
methods: {
changeValue(){
this.value++;
},
getComputedValue(){
console.log(this.computedValue);
}
}
}
</script>
结果
点击第二个按钮,多次获取computedValue的值时,返回的值都是相同的,Math.random()不会重新获取。体现了computed的缓存特性。只有当点击了第一个按钮,修改了computedValue依赖的响应式数据后,才会更新computedValue的缓存