层层抽丝剥茧，Vue Computed 属性代码深入解读

在本文中，我们将深入研究 Vue.js 中 computed 属性的代码实现，揭秘它的运作机制。 computed 属性是一种非常有用的特性，它允许我们在组件中定义计算属性，这些属性会根据其他属性的值自动更新。这使得我们能够在组件中使用复杂的逻辑，而无需手动更新状态。

一、computed 属性是如何实现响应式的？

为了理解 computed 属性是如何实现响应式的，我们需要首先了解一下 Vue.js 的响应式系统。Vue.js 的响应式系统是基于数据劫持的原理实现的。当我们创建 Vue 实例时，Vue.js 会遍历数据对象中的所有属性，并为每个属性创建一个响应式包装器。这个响应式包装器会在属性值发生变化时触发事件，从而通知 Vue 实例进行更新。

computed 属性也是通过数据劫持来实现响应式的。当我们定义一个 computed 属性时，Vue.js 会为这个属性创建一个 Watcher 对象。Watcher 对象会在 computed 属性的依赖项发生变化时触发事件，从而通知 Vue 实例重新计算 computed 属性的值。

二、computed 属性是如何收集数据依赖的？

computed 属性的依赖项是指那些会被该 computed 属性引用的其他属性。例如，如果我们有一个 computed 属性 fullName，它是通过 firstName 和 lastName 这两个属性计算出来的，那么 firstName 和 lastName 就是 fullName 的依赖项。

Vue.js 会自动收集 computed 属性的依赖项。当我们定义一个 computed 属性时，Vue.js 会遍历该属性的 getter 函数，并找到其中引用的所有属性。这些属性就是该 computed 属性的依赖项。

三、computed 属性是如何通知组件更新的？

当 computed 属性的依赖项发生变化时，Vue.js 会触发 Watcher 对象的事件。这个事件会通知 Vue 实例重新计算 computed 属性的值。一旦 computed 属性的值发生变化，Vue.js 就会更新组件的视图。

四、惰性求值

惰性求值是指 computed 属性只有在被访问时才会被计算。这可以提高性能，因为只有在需要时才会进行计算。Vue.js 默认情况下会对 computed 属性应用惰性求值。

但是，我们也可以通过设置 lazy 选项来关闭惰性求值。如果我们将 lazy 选项设置为 false，那么 computed 属性会在组件创建时就被计算，并且在组件的整个生命周期内保持不变。

结语

computed 属性是 Vue.js 中一个非常有用的特性。它允许我们在组件中定义计算属性，这些属性会根据其他属性的值自动更新。这使得我们能够在组件中使用复杂的逻辑，而无需手动更新状态。