Vue $delete 和 delete 的区别

delete 是js原生方法,由于语言限制,此操作无法设置回调来响应
$delete 是vue提供的实例方法,源代码如下:

function del (target, key) {
    if (isUndef(target) || isPrimitive(target)
    ) {
      warn(("Cannot delete reactive property on undefined, null, or primitive value: " + ((target))));
    }
    if (Array.isArray(target) && isValidArrayIndex(key)) {
      target.splice(key, 1);
      return
    }
    var ob = (target).__ob__;
    if (target._isVue || (ob && ob.vmCount)) {
      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();
  }

可以看到 vue 实例的$delete 处理了一些边界情况,处理了数组和对象的删除,最重要的是,获取了变量上的ob指针指向的观察者实例,并通知依赖dep里的watcher更新。

你可能感兴趣的:(前端)