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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-10-10
这篇文章主要介绍了vue3中Vant的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要为大家介绍了vue实例成员 插值表达式 过滤器基础教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
这篇文章主要为大家介绍了VueUse使用及造轮子选择对比示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue项目中如何将数据导出为word文档问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了解决vue $http的get和post请求跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
这篇文章主要介绍了Vue项目添加动态浏览器头部title的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
本文直接上 Vue3 + TypeScript + Element Plus 开发的内容，感兴趣的话一起来看看吧2021-08-08
element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)
这篇文章主要介绍了element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则),本篇文章记录el-table增加一行可编辑的数据列,进行增删改,感兴趣的朋友跟随小编一起看看吧2024-07-07
最新评论