vue set实现原理
Vue.set 的实现原理
Vue.set 是 Vue.js 提供的一个全局 API，用于向响应式对象添加新属性并确保新属性也是响应式的。其核心原理基于 Vue 的响应式系统。
响应式系统的核心
Vue 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来实现数据的响应式。对于对象，Vue 会递归地将所有属性转换为 getter/setter，从而在属性被访问或修改时触发依赖收集和更新。
Vue.set 的作用场景
当直接通过普通方式（如 obj.newProperty = value）向响应式对象添加新属性时，新属性不会触发视图更新，因为它未被 Vue 的响应式系统追踪。Vue.set 解决了这一问题。
实现逻辑
-
检查目标对象
如果目标对象是数组，且传入的键是有效的数组索引，则调用数组的 splice 方法（Vue 重写的响应式方法）触发更新。if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } -
处理对象属性
如果属性已存在于对象中且不是通过Object.defineProperty设置的（即非响应式），直接赋值并返回。if (key in target && !(key in Object.prototype)) { target[key] = val return val } -
触发响应式更新
如果对象是 Vue 实例或根数据对象（$data），则不允许动态添加属性。否则，通过defineReactive方法将新属性转换为响应式，并手动触发依赖通知。defineReactive(ob.value, key, val) ob.dep.notify()
源码关键点
defineReactive：为属性定义 getter/setter，实现响应式。ob.dep.notify()：通知所有依赖该对象的 Watcher 更新视图。- 数组处理的特殊逻辑：Vue 重写了数组的变异方法（如
push、splice），确保数组操作能触发响应式更新。
Vue 3 的变更
在 Vue 3 中，Vue.set 被移除，因为基于 Proxy 的响应式系统可以自动检测新增属性，无需手动处理。
使用示例
Vue.set(vm.someObject, 'newProperty', 'value')
// 或实例方法
this.$set(this.someObject, 'newProperty', 'value')通过 Vue.set，开发者可以确保动态添加的属性具备响应式能力，从而避免视图更新失效的问题。
