vue.set实现原理
Vue.set 的实现原理
Vue.set 是 Vue.js 提供的一个全局 API，用于向响应式对象添加新属性并确保新属性也是响应式的。其核心原理基于 Vue 的响应式系统。
响应式系统的核心机制
Vue 的响应式系统通过 Object.defineProperty 或 Proxy（Vue 3）实现数据劫持。当对象被初始化为响应式时，Vue 会递归地遍历对象的所有属性，将它们转换为 getter/setter。但对于后续动态添加的属性，Vue 无法自动检测到变化。
Vue.set 的作用
Vue.set 解决了动态添加属性的响应式问题。它通过以下方式工作：
- 对于目标对象是数组的情况，使用数组的 splice 方法触发响应式更新。
- 对于目标对象是普通对象的情况，通过 defineReactive 方法将新属性转换为响应式属性。
- 触发依赖通知，通知所有订阅者（Watcher）进行更新。
源码解析
以下是 Vue 2.x 中 Vue.set 的核心实现逻辑（简化版）：
function set(target, key, value) {
// 处理数组情况
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, value)
return value
}
// 处理已存在属性
if (key in target && !(key in Object.prototype)) {
target[key] = value
return value
}
// 处理新增属性
const ob = target.__ob__
if (!ob) {
target[key] = value
return value
}
// 将新属性转为响应式
defineReactive(ob.value, key, value)
// 通知依赖更新
ob.dep.notify()
return value
}使用场景
Vue.set 主要在以下场景中使用：
- 动态添加对象属性时
- 通过索引修改数组元素时（替代直接索引赋值）
- 添加数组新元素时（超出当前数组长度）
与直接赋值的区别
直接给对象添加新属性不会触发视图更新，因为新属性没有被转换为响应式属性。Vue.set 能够确保新属性被正确劫持并触发视图更新。
Vue 3 的变化
在 Vue 3 中，由于使用 Proxy 实现响应式，Vue.set 不再是必须的，因为 Proxy 可以拦截所有属性访问和修改操作，包括动态添加的属性。但为了兼容性，Vue 3 仍然保留了类似功能的 API。
