vue3中的this.$set写法举例
更新时间：2024年10月28日 14:46:00 作者：Cheng Lucky
在Vue2中,由于数据响应式是利用object.definedProperty()实现的,无法深层监听数据变化,因此提供了$set方法来解决数据变化视图未实时更新的问题,然而,在Vue3中,数据响应式使用ES6的proxy进行数据代理,因此废弃了$set的概念
vue3中的this.$set怎么写呢?
在vue2中我们常常会遇到明明已经改变了数据视图却没有实时更新这样的问题
举例
<el-input v-model="input.text" placeholder="请输入内容"></el-input>
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：
- reactive
- readonly
- ref
- computed
- 如果想要让一个对象变为响应式数据，可以使用reactive或ref
setup() {
const state = reactive({
input:{
text:"1"
}
});
return {
state // 导出响应式数组
}
},
mounted() {
console.log(state); // 是一个proxy
state.input.text = '2'; // 视图更新
}Vue3中废弃了$set的概念
到此这篇关于vue3中的this.$set怎么写呢?的文章就介绍到这了,更多相关vue3 this.$set内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue组件封装之dialog对话框组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
这篇文章主要给大家介绍了关于Vue在chrome44偶现点击子元素事件无法冒泡的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
这篇文章主要介绍了Vue监听使用方法和过滤器实现，过滤器为页面中数据进行强化，具有局部过滤器和全局过滤器2022-06-06
这篇文章主要介绍了element-ui如何在table中使用tooltip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在Vue项目中,Markdown文档的使用越来越普遍,因此在Vue中如何进行Markdown文档展示与解析也成为了一个热门话题,本文将介绍如何使用Vue实现Markdown文档的展示和解析,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-01-01
vue3新特性中最重要、内容最多的组合式api,组合式api既可以解决之前vue2开发的痛点,又提升了性能,下面这篇文章主要给大家介绍了关于vue3 option api新玩法的相关资料,需要的朋友可以参考下2022-06-06
antd Select下拉菜单动态添加option里的内容操作
这篇文章主要介绍了antd Select下拉菜单动态添加option里的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结，有需要的朋友们可以参考下。2019-08-08
这篇文章主要介绍了vue脚手架创建项目时报catch错误及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了Vue2.x通用编辑组件的封装及应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论