从 Vue 源码解析 Vue.set() 和 this.$set()

在 Vue 中，我们使用 Vue.set() 或 this.$set() 来设置响应式对象的新属性或更新已有属性。这个方法的底层实现原理比较复杂，本文将从源码角度解析其底层实现过程。

Vue.set() 和 this.$set() 概述

在 Vue.js 中，我们可以使用 Vue.set() 或 this.$set() 方法来修改数组或对象上的属性并保证数据响应式。

具体的使用如下：

// 在数组上设置一个新属性
Vue.set(array, indexOfArray, newValue)
this.$set(array, indexOfArray, newValue)

// 在对象上设置一个新属性
Vue.set(object, propertyName, value)
this.$set(object, propertyName, value)

Vue.set() 和 this.$set() 实现

Vue.set() 和 this.$set() 的实现是非常类似的，它们都是通过调用 defineReactive() 方法来实现将对象或数组的属性转为响应式数据。

具体的实现如下：

const ob = this.__ob__
ob.dep.notify()
if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.length = Math.max(target.length, key)
  target.splice(key, 1, val)
  return val
}
if (key in target && !(key in Object.prototype)) {
  target[key] = val
  return val
}
const oldVal = target[key]
if (val === oldVal) {
  return val
}
if (!ob) {
  target[key] = val
  return val
}
defineReactive(ob.value, key, val)
ob.dep.notify()
return val

代码中的 ob 是响应式对象的观察者，它通过调用 defineReactive() 方法来将对象或数组的属性转为响应式数据。

Vue.set() 和 this.$set() 示例

下面通过两个例子来演示 Vue.set() 和 this.$set() 的应用场景。

示例一：在数组中新增元素

我们可以使用 Vue.set() 或 this.$set() 方法来在已经定义的数组中新增元素。这种方式确保新添加的元素也是响应式的。

new Vue({
  data: {
    items: ['item1', 'item2', 'item3']
  },
  mounted() {
    // 在数组中添加新元素并确保该元素也是响应式的
    Vue.set(this.items, 3, 'item4')
  }
})

示例二：在对象中新增属性

同样的，我们也可以使用 Vue.set() 或 this.$set() 来在已经定义的对象中新增属性。这种方式同样保证新增的属性也是响应式的。

new Vue({
  data: {
    user: {
      name: 'John Doe',
      age: 30
    }
  },
  mounted() {
    // 在对象中添加新属性并确保该属性也是响应式的
    Vue.set(this.user, 'email', '[e-mail]')
  }
})

以上就是从源码角度分析 Vue.set() 和 this.$set() 方法的实现原理及实际应用示例。