vue3中的this.$set怎么写呢

您所在的位置:网站首页 你呢的呢怎么写呢 vue3中的this.$set怎么写呢

vue3中的this.$set怎么写呢

2024-07-13 15:42| 来源: 网络整理| 查看: 265

vue3中的this.$set怎么写呢

在vue2中我们常常会遇到明明已经改变了数据视图却没有实时更新这样的问题

举例

data() { return{ input:{ text:'1' } } } mounted () { this.input.text = '2'; // 视图层并没有改变 }

这时vue2就提供了一个方法就是$set

this.$set(this.input, 'text', '3');

原因就是 Vue2 中的数据响应式是利用 object.definedProperty()实现的,它是无法深层监听数据的变化的。

而Vue3,用的是ES6的proxy,对数据响应式进行一个数据的代理。这个就厉害了啊,结合Vue3的 composition API。

- Vue3 中的 reactivity API:

reactivereadonlyrefcomputed

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

setup() { const state = reactive({ input:{ text:"1" } }); return { state // 导出响应式数组 } }, mounted() { console.log(state); // 是一个proxy state.input.text = '2'; // 视图更新 }

Vue3中废弃了$set的概念



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3