解读计算属性和watch监听的区别及说明
更新时间：2025年01月15日 11:24:55 作者：写bug啦
计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值,而watch则是一个更为通用的监听器,它可以在数据变化时执行异步操作或开销较大的操作
计算属性和watch监听的区别
计算属性在调用时需要在模板中渲染
watch在调用时只需修改数据
计算属性默认深度依赖，watch默认浅度观测
计算属性适合做筛选，不可异步；watch适合做执行异步或开销较大的操作
computed
我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。
后续当我们再去使用计算属性的时候，如果计算属性中使用到的据没有发生变化，那么就会直接读取缓存的结果，不会重新计算。
watch
当需要在数据变化时执行异步或开销较大的操作时，使用watch监听是最有用的；
使用 watch 监听允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得 到最终结果前，设置中间状态。这些都是计算属性无法做到的；
设置{immediate: true }属性 将立即以表达式的当前值触发回调
什么是深度监听
Deep是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器
但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Sentry 是一款功能强大的开源错误监控服务,广泛用于追踪和修复应用中的异常情况,本文将详细介绍如何在 Vue 应用中集成和使用 Sentry,感兴趣的可以了解下2024-11-11
最近接到一个需求,公司需要对vue项目实现线上打包,下面这篇文章主要给大家介绍了关于Vue项目分包打包配置(包含dev)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
下面小编就为大家分享一篇Vue2 模板template的四种写法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue多次循环操作,结合实例形式分析了vue.js针对json嵌套数据的多次循环读取操作相关实现技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了Vue开发之封装分页组件与使用,结合实例形式分析了vue.js封装分页组件操作以及使用组件进行分页的相关实现技巧,需要的朋友可以参考下2019-04-04
nuxt.js 在middleware(中间件)中实现路由鉴权操作
这篇文章主要介绍了nuxt.js 在middleware(中间件)中实现路由鉴权操作，具有很好的参考价值，希望大家有所帮助。一起跟随小编过来看看吧2020-11-11
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来,所以下面这篇文章主要给大家介绍了关于vue动态加载本地图片的相关资料,需要的朋友可以参考下2021-07-07
nuxt 服务器渲染动态设置 title和seo关键字的操作
这篇文章主要介绍了nuxt 服务器渲染动态设置 title和seo关键字的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论