vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 计算属性和watch监听的区别

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

作者:写bug啦

计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值,而watch则是一个更为通用的监听器,它可以在数据变化时执行异步操作或开销较大的操作

计算属性和watch监听的区别

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

watch在调用时只需修改数据

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

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

computed

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

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

watch

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

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

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

什么是深度监听

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

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文