在Vue2中，修改某一些数据，视图是不能及时重新渲染的。
比如数组
<div> {{ myHobbies }} </div>
data: () => ({
myHobbies: ['篮球', '羽毛球', '桌球']
});
mounted () {
this.myHobbies[1] = 'sing'; // 视图层并没有改变
}
因此，Vue2就提供了一些变异的方法，比如$set
this.$set(myHobbies, 1, 'sing');
为什么不能直接修改？为什么要这么鸡肋？
原因就是 Vue2 中的数据响应式是利用 object.definedProperty()实现的（具体参考我的《属性描述符》），它是无法深层监听数据的变化的。。
而Vue3，利用的是ES6的proxy，对数据响应式进行一个数据的代理。这个就牛逼多了啊，结合Vue3的 composition API。
setup() {
const myHobbies = ['篮球', '羽毛球', '桌球'];
return {
myHobbies, // 导出普通数组
}
},
mouted() {
this.myHobbies[1] = 'sing'; // 视图依旧没变
}
划重点：
Vue3 中 新出的 reactivity API：
- reactive
- readonly
- ref
- computed
如果想要让一个对象变为响应式数据，可以使用reactive或ref
setup() {
const myHobbies = reactive(['篮球', '羽毛球', '桌球']);
return {
myHobbies, // 导出响应式数组
}
},
mounted() {
console.log(this.myHobbies); // 是一个proxy
this.myHobbies[1] = 'sing'; // 视图更新
}
因此Vue3也就把$set废了。
