del同set方法一样，都是响应式方法，只不过del方法是删除数组或对象中的某一项，该方法在全局方法Vue.delete和实例方法vm.$delete内被调用，可分别在src/core/global-api/index.js和src/core/instance/state.js文件中可查看相关定义
这个方法应该很少会用到
// src/core/global-api/index.js
Vue.delete = del
// src/core/instance/state.js
export function stateMixin (Vue: Class<Component>) {
// ......
Vue.prototype.$delete = del
// ......
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
del方法和set方法定义在同一文件src/core/observer/index.js中
export function del (target: Array<any> | Object, key: any) {
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()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
从该方法的参数target的类型就可以看出来，该参数只接受数组和对象，在方法内部首先对target做了层处理，如果为undefined或为简单类型的值，则会给出warn提示，接着会判断target是否为数组并且key是一个有效的索引，isValidArrayIndex方法在响应式set方法 (opens new window)小节已经分析过，这里就不多做说明
# 数组
如果target为数组，则会直接使用splice方法删除然后return，由于数组的部分原型方法被重写，所以会在被重写的splice方法内部直接进行触发更新
# 对象
接着del方法的逻辑进行分析，如果target为Vue的实例化对象，或者为根data对象，则会报warn提示并return，如果需要删除的属性key不存在target自身中，会直接return，否则会使用delete方法删除对象的属性，如果target对象不是响应式对象则只是做单纯的删除属性操作，否则会进一步的做触发更新操作