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踩坑记录之src的动态绑定赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了Vue数据驱动模拟实现，教大家如何在某个对象中，新增某个属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要为大家详细介绍了vue实现价格日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了vue2中使用AntV 以g2plot为实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理，本文主要介绍了vue项目打包以及优化的实现步骤，感兴趣的可以了解一下2021-07-07
Vue3 封装 element-plus 图标选择器实现步骤
这篇文章主要介绍了Vue3 封装 element-plus 图标选择器,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
本篇文章主要介绍了vue使用drag与drop实现拖拽的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在开发Web应用程序时,表格数据的展示和操作是非常常见的需求之一,特别是在处理表格中的复选框选择时,我们经常需要实现全选、反选等功能,这篇文章将带你深入了解如何在Vue.js中实现对二维数组数据的全选和反选功能,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了解决Vue input输入框卡死的问题,文中同时给大家提到了Vue-element中el-input输入卡顿问题及解决方法，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue实现商品多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论