Vue 中的 Vue.set 和 this.$set 的区别
在 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 的作用相同，都可以用于动态地添加或修改对象或数组中的某一项。但它们的使用方式和内部实现方式有所不同。
- 使用方式
Vue.set 是全局方法，可以在任何地方使用；this.$set 是 Vue 实例提供的方法，只能在 Vue 实例中使用。
- 内部实现
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 方法时，需要注意以下几点：
- 只能用于对象或数组，不能用于基本数据类型（如字符串、数字、布尔值等）。
- 修改数组的某一项时，需要确保索引值在合法范围内，否则会引发异常。
- 在使用 this.$set 方法时，需要确保该方法在 Vue 实例中使用，否则会引发异常。
- 在使用 Vue.set 或 this.$set 方法时，需要确保目标对象已经被 Vue 实例观察，否则无法实现响应式更新。如果目标对象没有被观察，可以使用 Vue.observable 方法将其转换为响应式对象。
- 在使用 Vue.set 或 this.$set 方法时，需要注意性能问题。由于这两个方法会触发 Vue 的响应式更新机制，因此在频繁修改对象或数组时可能会导致性能瓶颈。为了避免这种情况，可以尝试使用批量更新或异步更新的方式，或者在不需要响应式更新时使用原生的 JavaScript 方法进行修改。
总结
Vue.set 和 this.$set 是 Vue 中用于动态添加或修改对象或数组中的某一项的方法，它们的作用相同，但使用方式和内部实现方式有所不同。在使用这两个方法时，需要注意目标对象已经被 Vue 实例观察、不要使用在基本数据类型上、修改数组的索引需要确保在合法范围内、注意性能问题等注意事项。只有在正确使用这两个方法的前提下，才能充分发挥 Vue 的响应式更新机制的优势，提高开发效率和代码质量。
