Vue delete的源码实现

vm.$delete

功能

删除对象的属性，如果对象是响应式的，确保删除能茶法更新视图，这个方法主要用于避开Vue不能检测到属性被删除的限制，但是你应该很少会使用它

注意：目标对象不能说一个Vue实例或者Vue实例的跟数据对象

示例

data : {
        namelist : {
           id : 1, 
           name : 'aaaa'
        }       
}
// 删除name
delete this.namelist.name;//js方法
Vue.delete(this.namelist,'name');//vue方法
vm.$delete(vm.obj,'msg')

定义位置 global-api/index.js
Vue.delete()

// 静态方法 set/delete/nextTick
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick

Vue.$delete()
instance/index.js

/**
 * 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))
  ) {
    warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 判断是否是数组，以及 key 是否合法
  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()
}