首先我们看文档有这个例子
下面是vue $set部分源码
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn('Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}')
}
// 数组
if (Array.isArray(target) && isValidArrayIndex(key)) {
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: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
)
return val
}
if (!ob) {
target[key] = val
return val
}
defineReactive(ob.value, key, val)
ob.dep.notify()
我们先看第一块
if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)我们先看第一段代码 isUndef和isPrimitive方法，从名字就可以看出，isUndef是判断target是不是等于undefined或者null。isPrimitive是判断target的数据类型是不是string、number、symbol、boolean中的一种。所以这里的意思是如果当前环境不是生产环境并且 isUndef(target) || isPrimitive(target) 为真的时候，那么就抛出错误警告。
//----------------------------------
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}接着我们看第二段
isArray 判断是不是数组，并且key的值是有效的数组索引。
然后将target数组的长度设置为target.length和key中的最大值，为了防止我们传入key下标超过数组长度导致报错。
尤玉溪重写了vue 的原型 arrayMethods 里面监听了七个方法 他文档上有提到
这里使用splice是arrayMethods提供的7个方法中的一种 来做到替换数组的数据
//-------------------------------------
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}我们来看第三段
他判断了这个key是不是当前对象的key 和 这个key 不是object原型的key
说明这个key本来就在对象上面已经定义过了的，直接修改值就可以了，可以自动触发响应
//------------------------------
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
)
return val
}
if (!ob) {
target[key] = val
return val
}
我们来看第四段
我们可以看到 他给对象添加了一个__obj__属性如果一个对象有这个__ob__属性，那么就说明这个对象是响应式对象，我们修改对象已有属性的时候就会触发页面渲染
if (!ob)为真说明当前的target对象不是响应式对象，不需要响应，那么直接赋值返回即可
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
最后一段
这里才是vue.set()真正处理对象的地方。defineReactive(ob.value, key, val)的意思是给新加的属性添加依赖，以后再直接修改这个新的属性的时候就会触发页面渲染。 ob.dep.notify()这句代码的意思是触发当前的依赖（这里的依赖依然可以理解成渲染函数），所以页面就会进行重新渲染。
