Vue3 $set？

一、背景

在Vue2中，修改某一些数据，视图是不能及时重新渲染的。
比如数组

<div v-for="(item, index) in myHobbies" :key="index">{{ item }}</div>

data: () => ({
  myHobbies: ['篮球', '羽毛球', '桌球']
});
mounted () {
  this.myHobbies[1] = 'sing';  // 视图层并没有改变
}

因此，Vue2就提供了一些变异的方法，比如**$set**

this.$set(myHobbies, 1, 'sing');

为什么不能直接修改？为什么要这么鸡肋？
原因就是 Vue2 中的数据响应式是利用 object.definedProperty()实现的，它是无法深层监听数据的变化的。

二、Vue3 $set

而Vue3，利用的是ES6的proxy，对数据响应式进行一个数据的代理。这个就牛逼多了啊，结合Vue3的 composition API。

setup() {
  const myHobbies =  ['篮球', '羽毛球', '桌球'];
  return {
    myHobbies // 导出普通数组
  }
},
mouted() {
  this.myHobbies[1] = 'sing';  // 视图依旧没变
}

划重点：

Vue3 中 新出的 reactivity API：

1. reactive
2. readonly
3. ref
4. computed

如果想要让一个对象变为响应式数据，可以使用reactive或ref

setup() {
  const myHobbies =  reactive(['篮球', '羽毛球', '桌球']);
  return {
    myHobbies // 导出响应式数组
  }
},
mounted() {
  console.log(this.myHobbies); // 是一个proxy
  this.myHobbies[1] = 'sing'; // 视图更新
}

因此Vue3也就把$set废了。