vue2源码解析——Vue.set/$set方法如何给响应式对象添加属性

 为什么会有vue.set方法

在Vue中，当一个对象被创建时，Vue会将其属性转换为响应式属性，以便能够在属性发生变化时触发视图更新。然而，如果在已经创建的对象上直接添加新属性，新属性默认不会具有响应性，因为Vue无法在对象被创建时对新属性进行响应式处理。

vue.set方法怎么实现的

vue.set方法首先会区分是对数组还是对象进行新增属性：

数组新增元素

对象新增key和value

思考：如何知道对象是不是响应式的对象？

Vue.set / $set 伪代码实现

在Vue 2中，Vue.set和$set方法的实现原理主要涉及到响应式系统中的依赖收集和触发更新机制。下面是这两个方法源码的简单实现：

// Vue.set 方法定义
Vue.set = function (obj, key, value) {
 //判断是否为数组
  if (Array.isArray(obj) && isValidArrayIndex(key)) {
    obj.length = Math.max(obj.length, key);
    obj.splice(key, 1, value);//数组新增元素调用splice
    return value;
  }
 //判断对象本身是否有这个key
  if (key in obj && !(key in Object.prototype)) {
    obj[key] = value;
    return value;
  }
//vue在响应式拦截的时候会为定义响应式的对象加上__ob__属性，可以用它区分对象是否为响应式对象
  const ob = obj.__ob__;
//非响应式对象
  if (!ob) {
    obj[key] = value;
    return value;
  }
//响应式对象，给这个key加响应式
  defineReactive(ob.value, key, value);
  ob.dep.notify();
  return value;
};

// $set 方法定义
Vue.prototype.$set = function (target, key, value) {
  return Vue.set(target, key, value);
};

源码