Vue 中的 vm.$delete 方法
Vue.delete( target, propertyName/index )
-
参数:
- {Object | Array} target
- {string | number} propertyName/index
仅在 2.2.0+ 版本中支持 Array + index 用法。
-
用法:
删除对象的 property。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制,但是你应该很少会使用它。
注意:注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
源码阅读
/**
* Delete a property and trigger change if necessary.
*/
export function del (target: Array<any> | Object, key: any) {
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
// 如果是 undefined 或者是 原始值,发出警告
warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 判断 target 是否是一个数组,并且判断索引值是否以一个有效的索引
if (Array.isArray(target) && isValidArrayIndex(key)) {
// 如果是数组,通过 splice 删除
// 这里的 splice 做过响应式处理
target.splice(key, 1)
return
}
// 获取 target 的 ob 对象
const ob = (target: any).__ob__
// target 如果是 Vue 实例或者 $data 对象,直接返回
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
}
// 如果 target 对象没有 key 属性直接返回(就算是原型上有继承过来的属性也会直接返回)
if (!hasOwn(target, key)) {
return
}
// 删除属性
delete target[key]
if (!ob) {
return
}
// 通过 ob 发送通知
ob.dep.notify()
}
delete 这个方法的实现跟 set 的实现类似
-
当使用 delete 对数组进行删除操作,会调用响应式数组的 splice 方法,并在处理完成之后发送通知。
-
当使用 delete 对对象进行删除操作,会直接通过 delete 删除,并在处理完成之后发送通知。