迹忆客 专注技术分享

在 Vue 中，当我们需要动态地添加或修改对象或数组中的某一项时，我们通常会使用 Vue.set 或 this.$set 方法。虽然这两个方法的作用相同，但它们的使用方式和内部实现方式有所不同。

Vue.set

Vue.set 是 Vue.js 提供的全局方法，可以在任何地方使用。它的使用方式如下：

Vue.set(target, key, value)

其中，target 表示要添加或修改的对象或数组，key 表示要添加或修改的属性名或索引值，value 表示要添加或修改的属性值。

例如，我们有一个 data 对象：

data: {
  list: ['a', 'b', 'c']
}

如果我们想要将 list 数组的第一个元素修改为 ‘d’，可以使用 Vue.set 方法：

Vue.set(this.data.list, 0, 'd')

这样就可以将 list 数组的第一个元素修改为 ‘d’。

需要注意的是，Vue.set 方法只能用于对象或数组，不能用于基本数据类型（如字符串、数字、布尔值等）。

this.$set

this.$set 是 Vue 实例提供的方法，只能在 Vue 实例中使用。它的使用方式如下：

this.$set(target, key, value)

其中，target 和 key 的含义与 Vue.set 方法相同，value 表示要添加或修改的属性值。

例如，我们有一个组件：

export default {
  data() {
    return {
      list: ['a', 'b', 'c']
    }
  },
  methods: {
    changeList() {
      this.$set(this.list, 0, 'd')
    }
  }
}

如果我们想要将 list 数组的第一个元素修改为 ‘d’，可以使用 this.$set 方法。

需要注意的是，this.$set 方法只能用于对象或数组，不能用于基本数据类型（如字符串、数字、布尔值等）。

Vue.set 和 this.$set 的区别

Vue.set 和 this.$set 的作用相同，都可以用于动态地添加或修改对象或数组中的某一项。但它们的使用方式和内部实现方式有所不同。

1. 使用方式

Vue.set 是全局方法，可以在任何地方使用；this.$set 是 Vue 实例提供的方法，只能在 Vue 实例中使用。

2. 内部实现

Vue.set 和 this.$set 的内部实现方式略有不同。Vue.set 方法的实现方式如下：

Vue.set = function(obj, key, val) {
  if (Array.isArray(obj) && isValidArrayIndex(key)) {
    obj.length = Math.max(obj.length, key)
    obj.splice(key, 1, val)
    return val
  }
  if (hasOwn(obj, key)) {
    obj[key] = val
    return val
  }
  const ob = obj.__ob__
  if (!ob) {
    obj[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

而 this.$set 方法的实现方式如下：

export function set(target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  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 ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

可以看到，this.$set 方法在实现方式上多了一些边界检查和警告提示，以增加代码的健壮性和可读性。

注意事项

在使用 Vue.set 或 this.$set 方法时，需要注意以下几点：

1. 只能用于对象或数组，不能用于基本数据类型（如字符串、数字、布尔值等）。
2. 修改数组的某一项时，需要确保索引值在合法范围内，否则会引发异常。
3. 在使用 this.$set 方法时，需要确保该方法在 Vue 实例中使用，否则会引发异常。
4. 在使用 Vue.set 或 this.$set 方法时，需要确保目标对象已经被 Vue 实例观察，否则无法实现响应式更新。如果目标对象没有被观察，可以使用 Vue.observable 方法将其转换为响应式对象。
5. 在使用 Vue.set 或 this.$set 方法时，需要注意性能问题。由于这两个方法会触发 Vue 的响应式更新机制，因此在频繁修改对象或数组时可能会导致性能瓶颈。为了避免这种情况，可以尝试使用批量更新或异步更新的方式，或者在不需要响应式更新时使用原生的 JavaScript 方法进行修改。

总结

Vue.set 和 this.$set 是 Vue 中用于动态添加或修改对象或数组中的某一项的方法，它们的作用相同，但使用方式和内部实现方式有所不同。在使用这两个方法时，需要注意目标对象已经被 Vue 实例观察、不要使用在基本数据类型上、修改数组的索引需要确保在合法范围内、注意性能问题等注意事项。只有在正确使用这两个方法的前提下，才能充分发挥 Vue 的响应式更新机制的优势，提高开发效率和代码质量。