3-2-18-Vue.js 源码阅读-delete

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 删除，并在处理完成之后发送通知。