持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
1,开发环境target 没定义或者是基础类型报错
2，如果是数组，就用splice()重写数组
3,如果是对象本身的属性，则直接添加
判断目标值是否为响应式的
4,如果是vue实例，或者是根数据data 就警告
5如果目标值不是响应式的，不需要将其定义成响应式
6其他情况，目标值是响应式的，就通过Object.defineProperty进行数据监听
defineReactive(ob.value, key, val) ob.dep.notify() 更新界面
set的使用
vm.$set( target, key/index, value )
target: 对象/数组
key/index： 属性名/下标
value: 值
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性
源码：
export function set (target, key, val){
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 val7 }
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}
总结：
首先，判断在非生产环境，传入的target如果是undefined、null或是原始类型，则直接跑出错误。
如果传入的是一个数组的话，就会调用数组的splice方法进行实现响应式
如果不是一个数组，就当做对象来处理，先判断当前key在源对象是否存在，如果存在，说明当前key已经是响应式的，就直接进行操作对应的动作。如果key不在源对象中，就调用Object.defineReactive方法将该key添加到源对象上，并且实现了响应式
