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中，通过使用动态组件，我们可以实现组件的动态切换，从而达到页面的动态展示效果，这篇文章主要介绍了vue、uniapp实现组件动态切换,需要的朋友可以参考下2023-10-10
该文章描述了使用Element-UI的`el-upload`组件实现文件上传前的内容校验,通过`beforeUpload`钩子读取并解析文件内容,校验其格式和数据有效性,确保符合要求后才进行上传,详细介绍了校验逻辑及上传流程2026-05-05
vue基于element-china-area-data插件实现省市区联动
省市区联动在日常开发中用的非常多，本文就介绍一下vue基于element-china-area-data插件实现省市区联动，具有一定的参考价值，感兴趣的可以了解一下2022-04-04
在微信小程序中,默认情况下,文件预览功能不支持文档缩放,导致用户在遇到小字体时难以清晰阅读,为了解决这一问题并提升用户体验,实现文档的缩放功能至关重要,所以本文2024-12-12
这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue接通后端api以及部署到服务器操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue导出word纯前端的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在VUE项目中经常会用到mapState和mapActions，mapState主要用于同步全局的变量或者对象，这篇文章主要介绍了VUE中的mapState和mapActions的使用,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了vue.js框架实现表单排序和分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要给大家介绍了关于vue在使用ECharts时的异步更新和数据加载的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
最新评论