Vue3响应式原理-Ref/Reactive/Effect源码分析

前言

众所周知，Vue3使用ES6 Proxy替代ES5 Object.defineProperty实现数据响应式，这是Vue最为核心的功能之一。
Vue3相比Vue2.x，API变化很大，使用Vue3的 Composition API。然而，在响应式原理实现方面，源码还是依赖于：收集 + 依赖收集 + 触发执行。

介绍

在开始介绍Vue3响应式原理之前，必须从Vue3的诞生环境以及学习Vue3响应式原理的价值两个方面来进行简要分析和评估。

Vue3诞生环境

1. 前端生态变革。 近几年前端生态的变革风生水起，尤为突出。其具体表现形式为Web标准的更新迭代。事实上，各类新的主流标准的更新迭（取代旧的标准或旧的版本），都意味着生态的变革。也只有生态的变革，才能对Vue3的蓬勃发展提供保障。

2. Vue2生态瓶颈。Vue2生态的瓶颈问题，这里就不再赘述了。

3. Vue3生态变革。Vue3生态变革主要体现在以下三方面。

   • 实现Composition API。这应该是Vue3改版迭代的最大亮点。它的重点是让开发者通过组合基本可复用函数（也叫基本选项，base option），组合实现复合的组件。

   • 重构响应式系统。这一过程实际上是Vue2一直遗留的负担，是Vue2迟迟没有实现响应式的真正原理所在。到了Vue3重构，终于还清了这个历史债务。

   • 其它改变。其它改变也比较突出，比如服务端渲染的API演进、全局挂载API、优化diffing算法、新的组件插槽语法、新的状态树调试工具等。

学习Vue3响应式原理的价值

• 深入理解Vue3的工作机制
• 掌握最基本的基础知识
• 提升Vue3调试能力

Vue3响应式原理-概要

在分析响应式的原理之前，最基本的概念：“响应式”必须得以明确。何谓“响应式”呢？换言之，从程序运行结果的角度出发，可以对“响应式”做出如下判定：“响应式”程序一旦运行，程序运行的运算结果会根据数据的变动情况而发生相应（对应的，同步的）变化。

具体到Vue3的响应式原理，它主要依赖于以下几个步骤:

1.依赖收集

Vue3的依赖收集有两层意思：

• 依赖属性：
  每个响应式属性（叫响应式属性，是相对于普通状态管理属性而言的，这是Vue3官方专门的名词）都有一个dep，而dep的主要作用是追踪其追发布的Watcher（事实上在Vue2中称之为依赖追踪，在Vue3中称之为发布/订阅模式）。

• 收集依赖:
  每个Watcher都有一个dep，每个Watcher在被创建时，都必须将其与被追发布的响应式属性进行关联，这个过程就是依赖收集。

2.依赖收集触发执行

步骤1一旦完成，马上进入步骤2。由于响应式属性的变动，往往会触发依赖收集触发的执行。事实上，这种触发的执行源于Watcher。Watcher可以是计算Watcher，也可以是用户Watcher（用户Watcher又称之为用户订阅器）。

结语

Vue3响应式原理离不开收集、依赖、执行三个步骤的协同合作。这三个步骤的协同合作实际上构成了“响应式”计算过程。所谓的“响应式”计算过程， 意味着响应式属性变动 --> 依赖收集 --> 依赖属性执行。从更宏观的视角来看，这三个步骤实际构成了响应式系统。从这个侧面也揭示了：响应式系统是响应式计算过程的不断循环，依次递进。响应式是Vue3最重要的一个特性， 掌握它的原理，可以让我们在开发和调试的时候少走弯路，也能让我们的业务组件更加健壮和稳定。