深入剖析Vue3 computed与watch源码

在Vue3的响应式系统中，computed和watch是两个非常重要的特性，它们极大地提升了开发效率与代码的可维护性。深入了解它们的源码，能让开发者更好地运用这些特性。

先来看computed。computed本质上是一个计算属性，它会缓存计算结果，只有在依赖的数据发生变化时才会重新计算。从源码角度，当我们定义一个computed属性时，Vue3内部会创建一个ComputedRefImpl实例。这个实例内部有一个_value属性用来存储计算结果，还有一个_dirty属性标记是否需要重新计算。

ComputedRefImpl实例的核心在于getter函数。当访问computed属性时，getter函数被触发。如果_dirty为true，意味着依赖数据发生了变化，此时会调用用户定义的计算函数重新计算结果，并将结果存储在_value中，同时将_dirty设为false。下次再访问时，若_dirty为false，直接返回_value中的缓存值，避免了重复计算，提高了性能。

再说说watch。watch用于响应式地监听一个或多个数据源的变化，并在数据变化时执行相应的回调函数。Vue3的watch实现更为强大和灵活。源码中，watch函数接收多个参数，包括数据源、回调函数、以及一些可选配置。

当数据源发生变化时，watch会触发回调函数。它内部通过一个叫ReactiveEffect的类来追踪依赖关系。ReactiveEffect会在创建时记录依赖的响应式数据，当这些数据变化时，会触发相应的更新。而且，Vue3的watch支持深度监听，通过配置deep选项为true，能深入到对象内部，监听所有属性的变化。

在Vue3的源码中，computed和watch虽然功能不同，但都基于响应式原理构建。computed侧重于缓存计算结果以提升性能，watch侧重于监听数据变化并执行副作用操作。理解它们的源码实现，有助于开发者在实际项目中更加精准地使用这两个特性，优化代码逻辑，提升应用的性能与稳定性，让Vue3的开发更加得心应手。