网站分类目录源码,福州公司建设网站,绍兴seo管理,大型服装网站建设文章目录 computed实现原理computed与watch的区别computedwatch computed实现原理
源码实现computed 依赖收集#xff1a;当我们首次访问一个计算属性时#xff0c;它的 getter 函数会被执行。在 getter 函数执行过程中#xff0c;会访问它所依赖的响应式数据#xff0c;这… 文章目录 computed实现原理computed与watch的区别computedwatch computed实现原理
源码实现computed 依赖收集当我们首次访问一个计算属性时它的 getter 函数会被执行。在 getter 函数执行过程中会访问它所依赖的响应式数据这时就会触发数据的 getter 函数。在数据的 getter 函数中会把当前的计算属性也即当前的 Watcher添加到这个数据的依赖列表Dep中。这个过程叫做“依赖收集”。 缓存Vue 会为每个计算属性创建一个 Watcher 实例。这个 Watcher 中有一个 dirty 属性表示计算属性的值是否需要重新计算。当计算属性的依赖发生改变时就会把 dirty 属性设置为 true。当我们再次访问这个计算属性时如果 dirty 为 true就会重新计算属性的值并把 dirty 设置为 false如果 dirty 为 false就直接返回之前的计算结果。 依赖更新当一个响应式数据发生改变时会触发它的 setter 函数。在 setter 函数中会遍历这个数据的依赖列表Dep调用每一个依赖Watcher的 update 方法。在计算属性的 update 方法中会把 dirty 属性设置为 true这样下次访问计算属性时就会重新计算它的值。
computed与watch的区别
在 Vue.js 中computed 和 watch 都是常用的数据监控方法。它们都可以监视数据变化但实现方式和适用场景不同。
computed
是一种计算属性会自动缓存结果适合处理复杂和频繁使用的计算只有依赖的数据发生改变时才会重新计算因此性能更高不支持异步当 computed 内有异步操作时无效无法监听数据的变化如果需要对数据进行计算并且结果会频繁使用应该使用 computed
watch
是一种观察者模式需要手动执行回调函数可用于执行异步操作等watch 监听的数据每次发生变化都会执行回调函数因此可能会造成性能瓶颈如果需要处理数据变化后执行其他操作或监听数组或对象的变化应该使用 watch
