vue computed的缓存特性

概述：computed的计算属性有缓存机制，只有当其依赖的响应式数据发生变化时才会清空缓存重新计算结果

1. 其缓存机制本质是通过一个dirty属性控制的，只有dirty为true时才会重新计算结果替换缓存。
2. dirty只有当其响应式数据发送变化时才会设置为true，重新计算后会再次被设置为false

测试

<template><div><button @click="changeValue">更新Valuebutton><button @click="getComputedValue">打印computedValuebutton>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>

结果

1. 点击第二个按钮，多次获取computedValue的值时，返回的值都是相同的，Math.random()不会重新获取。体现了computed的缓存特性。
2. 只有当点击了第一个按钮，修改了computedValue依赖的响应式数据后，才会更新computedValue的缓存
   

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！