Vue中的响应式原理以及Observer的实现

前端

2024-01-21 09:30:23

Vue.js 中 Observer 的深入探索：响应式系统的幕后设计

前言

在 Vue.js 框架中，响应式原理是其核心功能之一。它允许数据和视图之间建立动态链接，从而实现实时更新。在这篇博文中，我们将深入探讨 Vue.js 中 Observer 的工作原理，并逐步了解其实现的细节。

1. Observer 的实现

Observer 是 Vue.js 响应式系统的核心。它的职责是监视数据对象中的变化，并通知订阅这些变化的组件。其实现主要涉及以下步骤：

1.1. 将每个属性包装成 Dep 实例

首先，Observer 遍历数据对象并为其每个属性创建一个 Dep 实例。Dep 实例是一个类，它负责收集订阅了该属性的组件（称为 Watcher），并在数据发生变化时通知它们。

const observe = (value) => {
  if (!isObject(value)) {
    return
  }
  const dep = new Dep()
  Object.defineProperty(value, '__ob__', {
    value: dep,
    enumerable: false,
    configurable: true
  })
  for (let key in value) {
    observe(value[key])
  }
}

1.2. 当数据发生变化时，通知 Dep 实例

当数据发生变化时，Vue.js 通过添加自定义 getter 和 setter 方法来监视属性的变化。这些方法会在获取或设置属性值时触发 Dep 实例的通知机制。

Object.defineProperty(data, key, {
  get: function () {
    dep.depend()
    return value
  },
  set: function (newValue) {
    if (newValue !== value) {
      value = newValue
      dep.notify()
    }
  }
})

1.3. Watcher 实例更新视图

当 Dep 实例收到数据变化的通知时，它会通知已订阅它的 Watcher 实例。Watcher 实例是响应式组件和视图之间的桥梁。它们负责将数据更新反映到视图中。

const watcher = new Watcher(vm, expOrFn, callback)

2. 深拷贝

在 Observer 的实现中，Vue.js 使用了一个深拷贝函数来创建数据对象的副本。此函数可确保原始数据对象在修改后不受影响，从而避免潜在的意外变化。

const deepCopy = (obj) => {
  if (Array.isArray(obj)) {
    return obj.map(deepCopy)
  } else if (isObject(obj)) {
    const copy = {}
    for (let key in obj) {
      copy[key] = deepCopy(obj[key])
    }
    return copy
  } else {
    return obj
  }
}