Vue.js 从源码的角度分析 $set 方法

在 Vue.js 中，set 方法是一个非常重要的工具，它允许我们在运行时动态地向 Vue 实例中添加或修改属性。通过使用 set 方法，我们可以确保 Vue.js 能够跟踪数据的变化，并在数据发生变化时更新视图。

要理解 $set 方法的实现，我们需要先了解 Vue.js 中是如何实现响应式数据的。在 Vue.js 中，数据对象是通过 Object.defineProperty() 方法来实现响应式的。当我们在数据对象中添加或修改属性时，Object.defineProperty() 方法会触发一个 setter 函数，该 setter 函数会通知 Vue.js 数据发生了变化。

现在，我们来看看 $set 方法的源码：

Object.defineProperty(target, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
    return value
  },
  set: function reactiveSetter (newVal) {
    if (newVal === value) {
      return
    }
    const value = newVal
    // ...省略代码
  }
})

在上面的代码中，我们首先通过 Object.defineProperty() 方法在目标对象 target 上定义了一个新属性 key。该属性具有以下特性：

• enumerable: true，表示该属性可以被 for...in 循环枚举。
• configurable: true，表示该属性的属性符可以被修改。
• get: function reactiveGetter () { return value }，表示该属性的 getter 函数。当我们读取该属性时，getter 函数会被调用，它会返回属性的值 value。
• set: function reactiveSetter (newVal) { ... }，表示该属性的 setter 函数。当我们修改该属性时，setter 函数会被调用。

在 setter 函数中，我们首先检查新值 newVal 是否与旧值 value 相等。如果相等，则直接返回，因为没有必要更新数据。如果新值与旧值不相等，则将新值赋值给 value，并执行一系列操作（省略代码），包括通知 Vue.js 数据发生了变化。

通过对 set 方法源码的分析，我们可以了解到 Vue.js 是如何实现响应式数据的。set 方法通过使用 Object.defineProperty() 方法来定义一个新的属性，并为该属性指定一个 setter 函数。当我们修改该属性时，setter 函数会被调用，它会通知 Vue.js 数据发生了变化。这样，Vue.js 就可以跟踪数据的变化，并在数据发生变化时更新视图。

在实际开发中，我们可以通过使用 $set 方法来动态地向 Vue 实例中添加或修改属性。这可以让我们更加灵活地管理数据，并确保 Vue.js 能够跟踪数据的变化。