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