《vue3》reactivity API（vue3的$set呢?）

在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：

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废了。

最后编辑于：2021-01-12 00:40

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦！！！