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的缓存
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3 Axios拦截器封装成request文件的示例详解
这篇文章主要介绍了Vue3 Axios拦截器封装成request文件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue.js实现多条件筛选、搜索、排序及分页的表格功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue.js实现带日期星期的数字时钟功能,涉及vue.js基于定时器的日期时间运算与数值操作相关使用技巧,需要的朋友可以参考下2018-08-08
vue中 router.beforeEach() 的用法示例代码
导航守卫主要是通过跳转或取消的方式守卫导航,本文通过示例代码讲解vue中 router.beforeEach() 的用法,感兴趣的朋友跟随小编一起看看吧2023-12-12
解读element ui el-row标签中的gutter用法
这篇文章主要介绍了解读element ui el-row标签中的gutter用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Vue实现无限级树形选择器，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
这篇文章主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),需要的朋友可以参考下2018-09-09
自定义指令是用来操作DOM的。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。这篇文章主要介绍了Vue.js自定义指令的用法与实例解析，一起看看吧2017-01-01
easycom是Uniapp框架中非常方便的组件自动注册机制，可以大大简化组件的使用和管理，这篇文章主要介绍了uniapp中easycom用法详解,需要的朋友可以参考下2023-03-03
使用Webpack提升Vue.js应用程序的4种方法（翻译）
这篇文章主要介绍了使用Webpack提升Vue.js应用程序的4种方法（翻译），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论