剖析 Vue 3.0 响应式原理：不仅限于 Proxy

2024-02-20 19:36:43

在 Vue 3.0 响应式系统中，Proxy 虽然扮演着重要的角色，但它绝非是唯一的主角。让我们一起探索响应式系统的更多奥秘，揭开 Proxy 背后的强大机制。

1. 深入剖析响应式系统的运作原理

Vue 3.0 响应式系统采用数据劫持的方式，对数据对象进行深度监听。当数据发生变化时，系统能够及时捕捉到这些变化，并触发相应的更新操作。这种劫持过程主要通过以下两种方式实现：

Object.defineProperty()方法：
Vue 3.0 利用 Object.defineProperty()方法，为数据对象的每个属性设置 getter 和 setter 方法。当访问或修改属性时，这些方法会被触发，系统从而能够监测到数据的变化。
Proxy API：
在支持 Proxy API 的环境中，Vue 3.0 会使用 Proxy 对象来劫持数据对象。Proxy 对象可以拦截对数据对象的各种操作，从而实现对数据变化的监听。

当数据发生变化时，Vue 3.0 需要知道哪些组件或视图依赖于这些数据，以便触发相应的更新操作。为了实现这一目的，Vue 3.0 采用了依赖收集机制。

依赖收集过程：
当组件或视图访问数据时，Vue 3.0 会将它们添加到与该数据相关的依赖列表中。当数据发生变化时，系统会遍历这些依赖列表，并通知依赖于这些数据的组件或视图进行更新。

当依赖于数据的组件或视图收到更新通知时，它们会重新渲染自身的模板，将最新的数据反映到视图中。这一过程主要通过以下两种方式实现：

虚拟 DOM：
Vue 3.0 使用虚拟 DOM 来优化更新过程。虚拟 DOM 是一个内存中的数据结构，它代表了实际 DOM 的状态。当数据发生变化时，Vue 3.0 会先更新虚拟 DOM，然后将更新后的虚拟 DOM 与实际 DOM 进行比较，只更新那些发生变化的部分。
组件更新：
当组件收到更新通知时，它会执行自己的更新逻辑，更新自身的模板。组件的更新逻辑通常包括重新渲染模板、更新子组件等操作。