Vue3 Computed 入门：揭秘双向数据绑定下的 reactivity

computed 的实现原理及处理流程

为了更好地理解 computed 的实现原理，我们可以将其分解为以下三个步骤：

1. 初始化 computed

当我们在组件中定义 computed 属性时，Vue3 会将其编译成一个特殊的函数，这个函数被称为计算属性函数。计算属性函数内部包含了计算属性的逻辑，它可以访问组件中的其他响应式数据，并根据这些数据计算出新的值。

2. 收集计算属性 doubleCount 的依赖和 state.count 的依赖

当计算属性函数被调用时，Vue3 会收集计算属性函数中访问的所有响应式数据的依赖。例如，如果我们在计算属性函数中访问了 state.count，那么 state.count 就会被收集为计算属性的依赖。

3. 触发 state.count 的依赖执行和 doubleCount 的依赖执行

当 state.count 发生改变时，Vue3 会触发 state.count 的依赖执行，这将导致计算属性函数重新执行。在计算属性函数执行时，Vue3 会再次收集计算属性函数中访问的所有响应式数据的依赖，如果此时计算属性函数中访问了 state.count，那么 state.count 就会再次被收集为计算属性的依赖。

以上便是 computed 的实现原理及处理流程，通过这种方式，Vue3 可以确保 computed 属性始终保持最新，并响应组件中其他响应式数据的变化。

优化策略

为了提高 computed 属性的性能，Vue3 引入了以下优化策略：

• 惰性求值：computed 属性不会在组件创建时立即执行，只有当组件需要渲染时，才会执行 computed 属性函数。
• 缓存结果：Vue3 会缓存 computed 属性的计算结果，当计算属性再次被访问时，Vue3 会直接返回缓存结果，而不会重新执行计算属性函数。
• 依赖追踪：Vue3 使用依赖追踪算法来跟踪 computed 属性的依赖，只有当 computed 属性的依赖发生改变时，才会重新执行计算属性函数。

总结

Vue3 的 computed 属性是 reactivity 系统的重要组成部分，它允许我们以声明式的方式定义和管理响应式数据。通过对 computed 源码的分析，我们了解了 computed 的实现原理及处理流程，以及 Vue3 为提高 computed 性能所引入的优化策略。希望这些知识能够帮助你更好地理解 Vue3 的 reactivity 系统，并编写出更优雅、更高效的 Vue3 代码。