Vue.prototype.$set = function (target, key, val) { if(Array.isArray(target) && isValidArrayIndex(key)) { //是数组并且key有效 target.length = Math.max(target.length, key) //处理key > target.length target.splice(key, 1, val) //添加新元素，并输出依赖更新同时新元素也会进行`Obsever`处理 return val } if(key in targert && !(key in Object.prototype) { //能遍历并且是自身key target[key] = val //触发set，执行依赖更新 return val } const ob = target._ob_ if(target.isVue || (ob && ob.vm.Count) { //不是vue实例也不是vue实例的根对象(即不是this.$data跟对象) //触发警告 return } if(!ob) { //只添加 target[key] = val return val } defineReactive(ob.value, key, val) //进行响应式处理 ob.dep.notify() //触发依赖更新 returnv val }
vm.$delete
用法： vm.$delete( target, key)
作用
对于数组，进行 delete 则是删除新元素，并需要触发依赖更新
对于对象，如果 key 值不存在，直接 return ，存在，删除元素，
对于对象本身不是响应式，则只删除 key-value ，无需其他处理
Vue.prototype.$delete = function (target, key) { if(Array.isArray(target) && isValidArrayIndex(key)) { target.splice(key, 1) return } const ob = target._ob_ if(target.isVue || (ob && ob.vm.Count) { //不是vue实例也不是vue实例的根对象(即不是this.$data跟对象) //触发警告 return } if(!hasOwn(target, key)) { return } delete target[key] if(!ob) { return } ob.dep.notify() }