解读计算属性和watch监听的区别及说明
更新时间：2025年01月15日 11:24:55 作者：写bug啦
计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值,而watch则是一个更为通用的监听器,它可以在数据变化时执行异步操作或开销较大的操作
计算属性和watch监听的区别
计算属性在调用时需要在模板中渲染
watch在调用时只需修改数据
计算属性默认深度依赖，watch默认浅度观测
计算属性适合做筛选，不可异步；watch适合做执行异步或开销较大的操作
computed
我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。
后续当我们再去使用计算属性的时候，如果计算属性中使用到的据没有发生变化，那么就会直接读取缓存的结果，不会重新计算。
watch
当需要在数据变化时执行异步或开销较大的操作时，使用watch监听是最有用的；
使用 watch 监听允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得 到最终结果前，设置中间状态。这些都是计算属性无法做到的；
设置{immediate: true }属性 将立即以表达式的当前值触发回调
什么是深度监听
Deep是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器
但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现滑动切换效果，仅在手机模式下可用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了Vue3中插槽(slot)用法汇总,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
在Vue.js中，路由与导航不仅涉及页面切换，还包括了向页面传递参数和获取查询参数，这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下2023-08-08
在vue项目中,搜索功能是我们经常需要使用的一个场景,下面这篇文章主要给大家介绍了关于Vue关键字搜索功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
开发项目有一段时间了,随着项目越来越大,打包的时间也相应的变长了,打包时的内存也增多了,这时候产生了一个问题,在发布项目的时候,会出现Vue热更新出现内存溢出的问题,所以本文给大家介绍了Vue热更新出现内存溢出的解决方法,需要的朋友可以参考下2024-05-05
这篇文章主要给大家介绍了关于vue点击右键出现自定义操作菜单实现的相关资料,在网页中我们也希望可以像桌面软件一样,点击右键后出现操作菜单,对选中的数据项进行相应的操作,需要的朋友可以参考下2023-08-08
vue3结合typescript中使用class封装axios
这篇文章主要为大家介绍了vue3结合typescript中使用class封装axios实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了vue组件中props与data的结合使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue页面图片不显示问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了如何使用vue3+TS实现简易组件库的相关资料,需要的朋友可以参考下2022-03-03
最新评论