vue set实现原理

Vue.set 的实现原理

Vue.set 是 Vue.js 提供的一个全局 API，用于向响应式对象添加新属性并确保新属性也是响应式的。其核心原理基于 Vue 的响应式系统。

核心机制

Vue 的响应式系统通过 Object.defineProperty 或 Proxy（Vue 3）实现数据劫持。当直接给对象添加新属性时，由于属性未被劫持，无法触发视图更新。

Vue.set 内部会调用 defineReactive 方法，将新属性添加到对象并设置为响应式。对于数组，Vue 重写了数组的变异方法（如 push、splice），Vue.set 内部会调用这些方法确保数组变更能被检测到。

源码分析（Vue 2.x）

function set(target, key, val) {
  // 处理数组情况
  if (Array.isArray(target)) {
    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.__ob__
  if (!ob) {
    target[key] = val
    return val
  }

  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

关键点说明

defineReactive 方法会为新属性创建 Dep 依赖收集器，通过 Object.defineProperty 设置 getter/setter

对于数组类型，Vue.set 内部使用 splice 方法触发数组变更通知

对象新增属性时会通过 ob.dep.notify() 手动触发依赖更新

使用场景

动态添加对象新属性时

通过索引修改数组元素时（直接 arr[index]=value 不会触发更新）

需要确保新增数据能被响应式系统追踪时