vue之computed的缓存特性
更新时间：2023年11月16日 15:01:48 作者：Novice-XiaoSong
这篇文章主要介绍了vue之computed的缓存特性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue computed缓存特性
概述
computed的计算属性有缓存机制，只有当其依赖的响应式数据发生变化时才会清空缓存重新计算结果
1.其缓存机制本质是通过一个dirty属性控制的，只有dirty为true时才会重新计算结果替换缓存。
2.dirty只有当其响应式数据发送变化时才会设置为true，重新计算后会再次被设置为false
测试
<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>
结果
1.点击第二个按钮，多次获取computedValue的值时，返回的值都是相同的，Math.random()不会重新获取。
2.体现了computed的缓存特性。只有当点击了第一个按钮，修改了computedValue依赖的响应式数据后，才会更新computedValue的缓存
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue不能检测到数据变化的几种情况说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了在vite项目中使用@进行文件的引入方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了Vue2中的组件通信方式，文中通过示例进行了详细的介绍，对我们学习Vue有一定的帮助，感兴趣的小伙伴可以了解一下2022-07-07
这篇文章主要为大家介绍了一款不用跑项目的vscode组件所见即所得效果的使用方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
在本篇内容里小编给大家分享的是关于vue登录注册的相关实例内容以及写法分析，有需要朋友们可以学习下。2019-09-09
vue2+elementui上传照片方式(el-upload超简单)
这篇文章主要介绍了vue2+elementui上传照片方式(el-upload超简单),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
watch是一个侦听器，默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数，watchEffect是会自动收集函数里面变量的响应式依赖，本文主要来讲讲二者的区别，感兴趣的可以了解一下2023-07-07
这篇文章主要介绍了基于Vue和Element-Ui搭建项目的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue.js实战之组件之间的数据传递的相关资料，文中通过示例代码和图文介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
cross-env 是一个非常实用的 Node.js 包,它允许你跨平台（Windows, macOS, Linux）使用环境变量,这对于在不同的操作系统上运行脚本时保持一致性非常有用,这篇文章主要介绍了vue cross-env使用和配置方法,需要的朋友可以参考下2024-08-08
最新评论