vue的响应式中,Object.defineProperty()并不能观测到对象属性的删除,所以,作者在vue的实例上添加了一个delete方法。那么就来讲讲delete方法的实现原理:
vm.$delete( target, propertyName/index )
参数:
{Object | Array} target
{string | number} propertyName/index
用法:
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue
不能检测到属性被删除的限制,但是你应该很少会使用它。
注意: 目标对象不能是一个 Vue
实例或 Vue
实例的根数据对象。
原理:src/core.observer/index.js
export function del (target, key) {
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.splice(key, 1)
return
}
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid deleting properties on a Vue instance or its root $data ' +
'- just set it to null.'
)
return
}
if (!hasOwn(target, key)) {
return
}
delete target[key]
if (!ob) {
return
}
ob.dep.notify()
}
看到代码的逻辑,其实和set方法很相似,首先判断如果不是生产环境,并且 传入的target值不存在或者是原始值,直接抛出错误。其次,判断如果target传入的值是一个数组,并且存在数组的索引,那么就把数组中对应的索引元素删除。
如果传入的target
不是数组,那就当做对象来处理。接下来获取到traget
的__ob__
属性,我们说过,该属性是否为true
标志着target
是否为响应式对象,接着判断如果tragte
是 Vue
实例,或者是 Vue
实例的根数据对象,则抛出警告并退出程序。接着判断传入的key
是否存在于target
中,如果key
本来就不存在于target
中,那就不用删除,直接退出程序即可。最后,如果target
是对象,并且传入的key
也存在于target
中,那么就从target
中将该属性删除,同时判断当前的target
是否为响应式对象,如果是响应式对象,则通知依赖更新;如果不是,删除完后直接返回不通知更新。
delete原理就是这么简单。