Vue中$set的使用和源码分析

Vue中$set的使用和源码分析

当我们给对象新增一个属性或者使用索引去修改一个数组时，控制台中已经打印出来，但是页面却没有刷新数据。

 this.stu.id = 126535789
 this.arr[2] = 100
 就像上面这样

简单来说$set就是解决上面问题的。
官方解释：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property 。

$set的使用

接收三个参数：

• 源对象
• 属性名 / 索引
• 属性值

 this.$set(this.stu, 'id', 123456)
 this.$set(this.arr, 2, 100)
 就像上面这样

---

$set的源码分析

我们直接把源码复制过来

function set (target, key, val) {
		// 判断是否为undefined、string、number、boolean和symbol
        if (isUndef(target) || isPrimitive(target)
        ) {
            warn(("Cannot set reactive property on undefined, null, or primitive value: "
             + ((target))));
        }
        // 判断是否是数组并且判断是否是有效的索引
        if (Array.isArray(target) && isValidArrayIndex(key)) {
        	// 如果key大于数组总长度，就将前面不存在的置为empty
            target.length = Math.max(target.length, key);
            // 直接使用重写后的splice方法进行响应式修改
            target.splice(key, 1, val);
            return val
        }
        // 判断是否是新加的属性，如果不是就直接修改，通知侦测变化
        if (key in target && !(key in Object.prototype)) {
            target[key] = val;
            return val
        }
        // 通过ob判断是否是响应式数据
        // 如果数据身上存在__ob__，就说明在initData过程中处理过这个数据
        var ob = (target).__ob__;
        // 通过_isVue的属性来判断target是否是vue的实例
        if (target._isVue || (ob && ob.vmCount)) {
            warn(
                'Avoid adding reactive properties to a Vue instance or its root $data ' +
                'at runtime - declare it upfront in the data option.'
            );
            return val
        }
        // 不存在__ob__属性就不做处理
        if (!ob) {
            target[key] = val;
            return val
        }
        //  转化为getter/setter形式，并向target的依赖通知变化
        defineReactive$$1(ob.value, key, val);
        ob.dep.notify();
        return val
}