解释 Vue 2 中为什么需要手动调用 Vue.set 或 vm. 来添加响应式属性，以及 Vue 3 中不再需要的原因。

各位观众老爷，大家好！今天咱们聊聊Vue.js里一个曾经让人又爱又恨的话题：响应式属性的“手动挡”和“自动挡”。 也就是Vue 2中为什么要手动Vue.set或者vm.$set，而Vue 3就解放双手了？ 准备好了吗？发车！

第一幕：回顾Vue 2的爱恨情仇

在Vue 2的世界里，响应式系统是构建数据驱动视图的核心。简单来说，当你修改了数据，视图会自动更新。听起来很美好，对吧？但是，美好往往伴随着一些小小的“限制”。

假设我们有一个Vue实例：

new Vue({
  data: {
    user: {
      name: '张三',
      age: 30
    }
  },
  template: `
    <div>
      <p>姓名：{{ user.name }}</p>
      <p>年龄：{{ user.age }}</p>
      <p>职业：{{ user.job }}</p>
      <button @click="addJob">添加职业</button>
    </div>
  `,
  methods: {
    addJob() {
      // 错误的做法：直接赋值
      this.user.job = '程序员';
      // 正确的做法：使用 Vue.set 或 vm.$set
      // Vue.set(this.user, 'job', '程序员');
      // this.$set(this.user, 'job', '程序员');
    }
  }
})

如果你直接在addJob方法里使用this.user.job = '程序员'，你会发现视图并没有更新！这是为什么呢？

原因就出在Vue 2的响应式原理上。Vue 2使用Object.defineProperty来劫持数据的getter和setter。简单来说，就是在数据被读取和修改的时候，Vue可以“感知”到，从而触发视图更新。

但是，Object.defineProperty只能劫持对象上已存在的属性。这意味着，Vue在初始化实例时，只会劫持data中已有的属性（比如name和age）。如果你在之后才添加新的属性（比如job），Vue就“不知道”了，自然也就无法触发视图更新。

这就好比你给一个保安配备了摄像头，但是保安只负责监控摄像头初始就对着的区域。如果你后来偷偷在保安的监控范围之外放了点东西，保安是看不到的！

为了解决这个问题，Vue 2提供了两个“手动挡”API：

• Vue.set(object, key, value): 全局Vue对象的静态方法。
• vm.$set(object, key, value): Vue实例的方法。

这两个方法的作用就是告诉Vue：“嘿，哥们，我这里新增了一个属性，你赶紧劫持一下！”

所以，正确的做法是：

addJob() {
  this.$set(this.user, 'job', '程序员');
}

这样，Vue就会劫持user.job，当job的值发生改变时，视图就能自动更新了。

表格：Vue 2响应式陷阱

情形	错误的做法	正确的做法	解释
给对象添加新属性	this.user.job = '程序员'	this.$set(this.user, 'job', '程序员')	Vue 2无法自动检测到对象新增的属性，需要手动触发响应式更新。
直接修改数组的索引	this.items[0] = '新的值'	this.$set(this.items, 0, '新的值')	Vue 2无法检测到通过索引直接修改数组元素的操作，需要手动触发响应式更新。
修改数组的长度	this.items.length = 0	this.items.splice(0)或使用其他数组操作方法	直接修改数组长度不会触发响应式更新，应该使用Vue能够检测到的数组操作方法（push、pop、shift、unshift、splice、sort、reverse）。
使用 Object.assign 添加多个属性	Object.assign(this.user, { job: '程序员', salary: 10000 })	先声明属性再赋值，或使用扩展运算符 {...this.user, job: '程序员', salary: 10000}	Object.assign 并不能保证所有属性都能够被响应式追踪，特别是在添加全新属性时。先声明属性，然后赋值可以确保Vue能够劫持这些属性。使用扩展运算符会创建一个新的对象，也会触发响应式。

第二幕：Vue 3的“自动挡”时代

终于，我们来到了Vue 3的世界！在这里，手动Vue.set或者vm.$set成为了历史。Vue 3是怎么做到的呢？答案是：Proxy。

Vue 3使用Proxy代替了Object.defineProperty来实现响应式。Proxy是ES6提供的一个强大的API，它可以拦截对象的所有操作，包括读取、写入、删除、枚举等等。

这就好比你请了一个更高级的保安，他可以监控对象的所有角落，无论你往哪里放东西，他都能第一时间发现！

使用Proxy，Vue 3就可以监听对象上任何属性的添加、修改和删除，而不需要提前声明。这意味着，在Vue 3中，你可以直接这样写：

new Vue({
  data() {
    return {
      user: {
        name: '李四',
        age: 25
      }
    }
  },
  template: `
    <div>
      <p>姓名：{{ user.name }}</p>
      <p>年龄：{{ user.age }}</p>
      <p>职业：{{ user.job }}</p>
      <button @click="addJob">添加职业</button>
    </div>
  `,
  methods: {
    addJob() {
      this.user.job = '设计师'; // 直接赋值，视图会自动更新！
    }
  }
})

是不是感觉世界都美好了？再也不用担心忘记手动Vue.set或者vm.$set了！

代码对比：Vue 2 vs Vue 3

让我们用一段代码来对比一下Vue 2和Vue 3的写法：

Vue 2:

new Vue({
  data: {
    user: {
      name: '王五'
    }
  },
  methods: {
    addAge() {
      // 必须使用 Vue.set 或 vm.$set
      this.$set(this.user, 'age', 28);
    }
  }
})

Vue 3:

import { createApp, ref } from 'vue'

const app = createApp({
  setup() {
    const user = ref({
      name: '赵六'
    })

    const addAge = () => {
      // 直接赋值，无需手动触发
      user.value.age = 32
    }

    return {
      user,
      addAge
    }
  },
  template: `
    <div>
      <p>姓名：{{ user.name }}</p>
      <p>年龄：{{ user.age }}</p>
      <button @click="addAge">添加年龄</button>
    </div>
  `
})

app.mount('#app')

可以看到，Vue 3的代码更加简洁，也更加符合直觉。

第三幕：Proxy的幕后英雄

那么，Proxy到底是如何工作的呢？简单来说，Proxy会在目标对象和对其的操作之间设置一个“代理”，所有对目标对象的操作都会先经过这个“代理”，然后才能到达目标对象。

const target = {
  name: '原始对象'
};

const handler = {
  get: function(target, prop, receiver) {
    console.log(`正在读取属性：${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set: function(target, prop, value, receiver) {
    console.log(`正在设置属性：${prop} = ${value}`);
    return Reflect.set(target, prop, value, receiver);
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：正在读取属性：name  和  原始对象
proxy.name = '代理对象'; // 输出：正在设置属性：name = 代理对象
console.log(target.name); // 输出：代理对象 (target 也被修改了)

在这个例子中，handler对象定义了两个方法：get和set，分别用于拦截读取和设置属性的操作。当通过proxy读取或设置属性时，这些方法会被调用，从而可以进行一些额外的处理。

Vue 3正是利用Proxy的这种能力，在数据被读取和修改时，触发响应式更新。

表格：Object.defineProperty vs Proxy

特性	Object.defineProperty	Proxy
劫持目标	只能劫持对象上已存在的属性。	可以劫持整个对象，包括属性的读取、设置、删除、枚举等操作。
性能	在大量属性需要劫持时，性能可能会受到影响。	性能通常更好，因为Proxy是懒代理，只有在实际操作属性时才会触发拦截器。
兼容性	兼容性较好，可以支持到IE8（需要使用es5-shim等polyfill）。	兼容性较差，只能支持到IE11，并且需要使用polyfill才能在不支持Proxy的浏览器中使用。
监听数组	难以直接监听数组的变化，需要重写数组的方法（push、pop等）。	可以直接监听数组的变化，包括通过索引修改数组元素、修改数组长度等操作。
使用方式	需要遍历对象的每个属性，并使用Object.defineProperty进行劫持。	只需要创建一个Proxy实例即可。
对新增属性的处理	无法自动检测到新增的属性，需要手动触发响应式更新（使用Vue.set或vm.$set）。	可以自动检测到新增的属性，无需手动触发响应式更新。

第四幕：Vue 3响应式系统的注意事项

虽然Vue 3的响应式系统更加强大和方便，但仍然有一些需要注意的地方：

1. ref vs reactive: 在Vue 3中，我们通常使用ref和reactive来创建响应式数据。ref用于包装基本类型的值（例如字符串、数字、布尔值），而reactive用于包装对象。

   import { ref, reactive } from 'vue'
   
   const count = ref(0) // count.value
   const user = reactive({ name: '张三', age: 30 })

   使用ref时，我们需要通过.value来访问或修改值。这是因为ref实际上创建了一个包含.value属性的对象，Vue 3会劫持这个.value属性。

2. 解构的陷阱: 如果你解构了reactive对象，那么解构出来的属性将不再是响应式的。

   import { reactive } from 'vue'
   
   const user = reactive({ name: '李四', age: 25 })
   
   // 错误的做法：解构后不再是响应式的
   const { name, age } = user
   
   // 正确的做法：使用 toRefs 将 reactive 对象转换为 ref 对象
   import { toRefs } from 'vue'
   const { name, age } = toRefs(user)

   toRefs可以将reactive对象的属性转换为ref对象，这样解构出来的属性仍然是响应式的。

3. 深层嵌套的对象: 虽然Proxy可以劫持整个对象，但是如果对象中包含深层嵌套的对象，那么只有顶层对象是响应式的。你需要确保所有需要响应式的对象都使用reactive或ref进行包装。

4. 小心翼翼的第三方库: 有些第三方库可能会修改你的数据，而绕过 Vue 的响应式系统，导致视图无法更新。 在这种情况下，你可能需要手动触发更新，或者寻找替代方案。

第五幕：总结与展望

总而言之，Vue 2的Vue.set和vm.$set是由于Object.defineProperty的限制而产生的“手动挡”解决方案。而Vue 3使用Proxy实现了更加强大和方便的“自动挡”响应式系统，解放了开发者的双手。

Vue 3的响应式系统是Vue.js发展的一个重要里程碑，它不仅提高了开发效率，也降低了出错的可能性。当然，Proxy也不是银弹，它也有自己的局限性，我们需要在使用时注意一些细节。

希望今天的讲座能够帮助大家更好地理解Vue.js的响应式原理，并在实际开发中更加得心应手。 感谢大家的收看，我们下期再见！