当前位置: 代码网 > it编程>前端脚本>Vue.js > 解读计算属性和watch监听的区别及说明

解读计算属性和watch监听的区别及说明

2025年02月14日 Vue.js 我要评论
计算属性和watch监听的区别计算属性在调用时需要在模板中渲染watch在调用时只需修改数据计算属性默认深度依赖,watch默认浅度观测计算属性适合做筛选,不可异步;watch适合做执行异步或开销较大

计算属性和watch监听的区别

计算属性在调用时需要在模板中渲染

watch在调用时只需修改数据

计算属性默认深度依赖,watch默认浅度观测

计算属性适合做筛选,不可异步;watch适合做执行异步或开销较大的操作

computed

我们去第一次使用计算属性的时候,会执行计算属性并进行计算,然后将计算的结果缓存起来。

后续当我们再去使用计算属性的时候,如果计算属性中使用到的据没有发生变化,那么就会直接读取缓存的结果,不会重新计算。

watch

当需要在数据变化时执行异步或开销较大的操作时,使用watch监听是最有用的;

使用 watch 监听允许我们执行异步操作 (访问一个 api),限制我们执行该操作的频率,并在我们得 到最终结果前,设置中间状态。这些都是计算属性无法做到的;

设置{immediate: true }属性 将立即以表达式的当前值触发回调

什么是深度监听

deep是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器

但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com