简述Vue 的 computed 的实现原理？

Vue面试题 5月前 0 109

Vue 的 computed 是计算属性，它是基于它们的响应式依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。这就意味着只要依赖不变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

那么，Vue 是如何实现这个特性的呢？实现这个功能的关键就是 Vue 的响应式系统和依赖追踪系统。

依赖收集：当我们首次访问一个计算属性时，它的 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，这样下次访问计算属性时就会重新计算它的值。

通过这种方式，Vue 实现了计算属性的依赖追踪和缓存功能，使得只有在依赖发生改变时才重新计算属性的值，大大提高了性能。