Vue2源码解析 变化侦测相关的API实现原理-vm.$delete

目录

1  用法

2  实现原理

---

1  用法

vm.$delete( target , key );

参数：{ Object | Array }  target

           { string | number } key/index

用法：vm.$delete的作用是删除数据中的某个属性。如果对象是响应式的，需要确保删除能触发更新视图，这个方法主要是用于避开vue.js不能检测到属性被删除的限制。

注意：目标对象不能是vue.js实例或vue.js实例的根数据对象。

2  实现原理

如果非要用delete来删除属性，那么也有一个取巧的方式，但是强烈不推荐：

delete this.obj.name
// 手动向依赖发送变化通知
this.obj.__obj__.dep.notify()

Vue.prototype.$delete = del 上挂载了一个del函数：

export function del(target, key) {
    // 新增
    if (Array.isArray(target) && isValidArrayIndex(key)) {
        target.splice(key, 1)
        return
    }
    const ob = target.__ob__
    // target不能是vue实例 或 vue实例的根数据对象上使用
    if (target._isVue || (ob && ob.vmCount)) {
        process.env.NODE_ENV !== 'production' && warn('...')
        return
    }
    // 如果key不是target自身的属性，则终止程序继续执行
    if (!hasOwn(target, key)) {
        return
    }
    // 如果ob不存在，则直接终止程序
    if (!ob) {
        return
    }
    delete target[key]
    ob.dep.notify()
}

只需要使用splice将参数key所指定的索引位置的元素删除即可。因为splice方法，数组拦截器会自动向依赖发送通知。

注：本文章来自于《深入浅出vue.js》（人民邮电出版社）阅读后的笔记整理