分析 Vue 2 中响应式属性添加/删除的限制，以及 `Vue.set` 和 `Vue.delete` (或 “/“) 的源码实现和解决的痛点。

各位观众，大家好！今天咱们聊聊 Vue 2 那些让人又爱又恨的响应式“小脾气”——关于动态增删属性的那些事儿。准备好瓜子花生，咱们开始上课！

开场白：响应式系统的“小秘密”

Vue 2 的响应式系统，可以说是它的核心竞争力之一。它能让数据变化自动驱动视图更新，开发者只需要专注于数据本身，而不用手动操作 DOM。但这套精妙的机制，也不是万能的。它有一些限制，尤其是在动态添加或删除属性时，会让我们遇到一些“惊喜”。

第一节课：响应式属性的“先天不足”

Vue 2 的响应式实现，依赖于 Object.defineProperty 这个 JavaScript API。在组件初始化时，Vue 会遍历 data 中的所有属性，使用 Object.defineProperty 把它们转换成 getter/setter。当这些属性被访问或修改时，setter 会通知订阅者（比如 Watcher），触发视图更新。

但问题来了：

新增属性： 如果你在组件初始化之后，直接给 data 对象添加新的属性，Vue 并不知道这个新属性的存在，也就无法为它设置 getter/setter，所以新属性不是响应式的。
删除属性： 类似地，如果你直接使用 delete 操作符删除 data 对象中的属性，Vue 也无法追踪到这个变化，视图不会更新。

咱们用代码说话，更直观：

<template>
  <div>
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    <button @click="addAge">Add Age</button>
    <button @click="deleteName">Delete Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
    };
  },
  methods: {
    addAge() {
      this.age = 20; // 视图不会更新
      console.log(this.$data); // 你会发现age确实加到$data上了，但是视图不更新
    },
    deleteName() {
      delete this.name; // 视图不会更新
      console.log(this.$data); // 你会发现name确实从$data删除了，但是视图不更新
    },
  },
};
</script>

运行上面的代码，你会发现点击 "Add Age" 按钮，视图并没有显示 age 的值。点击 "Delete Name" 按钮，视图中的 name 仍然存在。这就是传说中的“非响应式”属性。

第二节课：Vue.set 和 Vue.delete：官方的“救命稻草”

为了解决动态增删属性带来的响应式问题，Vue 提供了 Vue.set 和 Vue.delete 这两个 API。它们的作用是：

Vue.set(object, key, value)：向响应式对象中添加一个属性，并确保这个新属性也是响应式的。
Vue.delete(object, key)：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。

让我们改造一下上面的代码：

<template>
  <div>
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    <button @click="addAge">Add Age</button>
    <button @click="deleteName">Delete Name</button>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      name: '张三',
    };
  },
  methods: {
    addAge() {
      Vue.set(this.$data, 'age', 20); // 使用 Vue.set 添加属性
    },
    deleteName() {
      Vue.delete(this.$data, 'name'); // 使用 Vue.delete 删除属性
    },
  },
};
</script>

现在，点击 "Add Age" 按钮，视图会显示 age 的值。点击 "Delete Name" 按钮，视图中的 name 会消失。问题解决了！

第三节课：Vue.set 的源码剖析：它是如何工作的？

Vue.set 的实现，其实并不复杂，但却非常巧妙。我们来看一下它的简化版源码（为了方便理解，省略了一些边界情况处理和类型判断）：

/**
 * Set a property on an object. Adds the new property
 * if it does not already exist.
 */
function set(target, key, val) {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target).__ob__;
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    );
    return val;
  }
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val
}

这段代码的核心逻辑如下：

数组处理： 如果 target 是数组，且 key 是合法的数组索引，那么使用 splice 方法插入新元素。splice 方法本身就能触发数组的响应式更新。
已存在属性： 如果 key 已经存在于 target 对象中，直接赋值即可。因为这个属性已经是响应式的了。
Vue 实例或其 $data： 如果 target 是 Vue 实例或其 $data 对象，发出警告，建议在 data 选项中提前声明属性。
非响应式对象： 如果 target 不是响应式对象，直接赋值即可。
响应式对象： 如果 target 是响应式对象，并且 key 不存在，那么：
- 调用 defineReactive 函数，为新属性创建 getter/setter，使其变成响应式属性。
- 调用 ob.dep.notify()，手动触发依赖更新。ob 是 Observer 实例，dep 是 Dependency 实例，负责管理依赖这个对象的 Watcher。

关键点：defineReactive 和 ob.dep.notify()

defineReactive： 这个函数负责把一个普通的属性转换成响应式属性。它使用 Object.defineProperty 为属性创建 getter/setter，并创建对应的 Dependency 实例。
ob.dep.notify()： 这个方法通知所有依赖这个 Observer 的 Watcher 进行更新。这样，视图就能响应新属性的变化了。

第四节课：Vue.delete 的源码剖析：如何优雅地删除属性？

Vue.delete 的实现也类似，我们来看一下它的简化版源码：

/**
 * Delete a property and trigger change if necessary.
 */
function del(target, key) {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1);
    return
  }
  const ob = (target).__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();
}

这段代码的核心逻辑如下：

数组处理： 如果 target 是数组，且 key 是合法的数组索引，那么使用 splice 方法删除元素。
Vue 实例或其 $data： 如果 target 是 Vue 实例或其 $data 对象，发出警告，建议设置为 null。
不存在属性： 如果 key 不存在于 target 对象中，直接返回。
删除属性： 使用 delete 操作符删除属性。
响应式对象： 如果 target 是响应式对象，调用 ob.dep.notify()，手动触发依赖更新。

关键点：ob.dep.notify()

ob.dep.notify()： 同样，这个方法通知所有依赖这个 Observer 的 Watcher 进行更新。这样，视图就能响应属性的删除了。

第五节课：$set 和 $delete: 组件内部的“糖衣炮弹”

实际上，在组件内部，我们并不需要每次都引入 Vue 对象来调用 Vue.set 和 Vue.delete。Vue 为我们提供了更方便的实例方法：$set 和 $delete。

它们的作用和 Vue.set 和 Vue.delete 完全一样，只是调用方式略有不同：

this.$set(object, key, value)
this.$delete(object, key)

它们本质上是对 Vue.set 和 Vue.delete 的一个封装，使用起来更加简洁。

第六节课：使用场景和注意事项：什么时候需要它们？

Vue.set 和 Vue.delete 主要用于以下场景：

动态添加响应式属性： 当你需要向已有的响应式对象（比如 data 对象）添加新的属性，并且希望这个属性也是响应式的。
动态删除响应式属性： 当你需要删除已有的响应式对象（比如 data 对象）的属性，并且希望视图能同步更新。

需要注意的是：

数组： 对于数组，直接使用 push、pop、shift、unshift、splice、sort、reverse 等方法，就能触发响应式更新，不需要使用 Vue.set 或 Vue.delete。
对象： 尽量避免在组件初始化之后动态添加或删除属性。如果在开发过程中能预见到需要哪些属性，最好在 data 选项中提前声明。
性能： 频繁地使用 Vue.set 和 Vue.delete 可能会影响性能。尽量避免在循环中大量使用它们。

第七节课：替代方案：Object.assign 和 ... 扩展运算符

除了 Vue.set，我们还可以使用 Object.assign 或 ... 扩展运算符来添加响应式属性。

Object.assign： 可以将一个或多个源对象的属性复制到目标对象。如果目标对象是响应式的，那么复制过来的属性也会变成响应式的。

this.myObject = Object.assign({}, this.myObject, { newProperty: 'newValue' });

... 扩展运算符： 可以创建一个包含原有属性和新属性的新对象。同样，如果原有对象是响应式的，那么新对象也会是响应式的。

this.myObject = { ...this.myObject, newProperty: 'newValue' };

这两种方法，本质上都是创建了一个新的对象，而不是直接修改原有的对象。Vue 会检测到对象的改变，从而触发响应式更新。

第八节课：Vue 3 的“新世界”：Proxy 的威力

在 Vue 3 中，响应式系统进行了重构，使用了 Proxy 对象来替代 Object.defineProperty。Proxy 能够监听对象的所有操作，包括属性的添加和删除，所以 Vue 3 不再有动态增删属性的限制。

这意味着，在 Vue 3 中，你可以直接给 data 对象添加或删除属性，而不用担心响应式问题。

<template>
  <div>
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    <button @click="addAge">Add Age</button>
    <button @click="deleteName">Delete Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '李四',
    };
  },
  methods: {
    addAge() {
      this.age = 30; // 在 Vue 3 中，视图会自动更新
    },
    deleteName() {
      delete this.name; // 在 Vue 3 中，视图会自动更新
    },
  },
};
</script>

看到了吗？在 Vue 3 中，代码变得更加简洁、自然。

总结：Vue 2 的“温柔陷阱”和 Vue 3 的“自由飞翔”

Vue 2 的响应式系统虽然强大，但也存在一些限制。Vue.set 和 Vue.delete 是解决动态增删属性带来的响应式问题的有效手段，但需要谨慎使用。

而 Vue 3 使用 Proxy 对象，彻底解决了这个问题，让开发者可以更加自由地操作数据。

咱们来个表格对比一下：

特性	Vue 2	Vue 3
响应式实现	`Object.defineProperty`	`Proxy`
动态增删属性	有限制，需要使用 `Vue.set` 和 `Vue.delete`	无限制，直接操作即可
性能	在大量动态增删属性时，可能影响性能	性能更好
使用复杂度	略高	更简单

希望今天的课程能帮助大家更好地理解 Vue 2 的响应式系统，并在实际开发中避免踩坑。当然，如果你正在考虑使用 Vue 3，那么恭喜你，你将体验到更加强大和便捷的开发体验！

下课！

发表回复 取消回复

发表回复取消回复