走进 Vue 2.x 中的响应式实现（二）

2024-01-20 20:34:49

我们已经了解了 Vue 2.x 响应式系统的前世今生，那么现在我们深入探究一下它是如何实现的。

Vue 2.x 的响应式系统本质上是一个数据观察者（data observer），它可以跟踪数据变化并自动更新视图。这种数据观察者模式的核心是依赖收集（dependency collection）和派发更新（dispatch updates）。

依赖收集

依赖收集是指当一个数据项被改变时，收集所有依赖于该数据项的组件。这些组件被称作该数据项的订阅者（subscriber）。

在 Vue 2.x 中，依赖收集是在数据对象（data object）的 getter 函数中实现的。当一个数据对象属性被访问时，它的 getter 函数就会被调用。在 getter 函数中，Vue 会将当前正在执行的组件添加到该属性的订阅者列表中。

例如，假设我们有一个 Vue 实例，它的 data 对象中有一个属性叫 message。当我们访问 this.message 时，Vue 会调用 message 属性的 getter 函数。在这个 getter 函数中，Vue 将当前正在执行的组件添加到 message 属性的订阅者列表中。

派发更新

当一个数据项被改变时，Vue 会派发更新（dispatch updates）给所有依赖于该数据项的组件。这些组件会更新自己的视图，以反映数据项的变化。

在 Vue 2.x 中，派发更新是通过 Watcher 实现的。Watcher 是一个类，它可以观察一个数据对象属性的变化。当一个数据对象属性被改变时，Watcher 会被触发，并调用它的回调函数。

在回调函数中，组件可以更新自己的视图，以反映数据项的变化。

响应式系统的实现原理

Vue 2.x 的响应式系统是如何实现的呢？让我们来看看一个简单的例子。

// 创建一个 Vue 实例
const app = new Vue({
  data: {
    message: 'Hello, world!'
  }
})

// 访问数据属性
app.message // "Hello, world!"

// 改变数据属性
app.message = 'Goodbye, world!'

// 视图更新
// "Goodbye, world!"