Vue3中reactive变量重新赋值无法响应的3种处理方法
更新时间：2023年08月04日 10:43:13 作者：敦厚的曹操
这篇文章主要给大家介绍了关于Vue3中reactive变量重新赋值无法响应的3种处理方法,在Vue3中可以使用reactive函数将一个普通对象转换为响应式对象,需要的朋友可以参考下
第一种解决方案：变量值包裹对象，加一个{data:变量值}
1、html
<div>a=【{{a.data}}】</div>
<div>-----------------</div>
<div>【{{ b.data[0] }}】</div>
<div>【{{ b.data[1] }}】</div>
<div>【{{ b.data[2] }}】</div>2、定义reactive变量
let a=reactive({data:"110"});
let b=reactive({data:[0,1,2]});3、重新赋值
a.data="119";
b.data=[...[9,8,7]];第二种解决方案：ref
1、html
<div>a=【{{a}}】</div>
<div>-----------------</div>
<div>【{{ b[0] }}】</div>
<div>【{{ b[1] }}】</div>
<div>【{{ b[2] }}】</div>2、定义ref变量
let a=ref("110");
let b=ref([0,1,2]);3、赋值
a.value="119";
b.value=[...[9,8,7]];第三种方案：push（不推荐）
总结
到此这篇关于Vue3中reactive变量重新赋值无法响应的3种处理方法的文章就介绍到这了,更多相关Vue3 reactive变量重新赋值无法响应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节2022-12-12
本文主要介绍了VUE侧边导航栏实现筛选过滤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
大家应该都知道vue是单向数据流，一般我们也不会在子组件里面修改父组件传进来的值，但总有需要修改的时候，这篇文章主要介绍了vue中修改props传进来的值,需要的朋友可以参考下2022-12-12
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue使用csp的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了如何利用Vue实现读取本地图片的功能，文中的示例代码讲解详细，具有一定的参考价值，需要的小伙伴可以学习一下2023-07-07
Vue3为我们开发提供了两种组件逻辑实现方式：选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助2023-12-12
解决vue中修改export default中脚本报一大堆错的问题
今天小编就为大家分享一篇解决vue中修改export default中脚本报一大堆错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法
这篇文章主要介绍了VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于Vue如何实现分页功能的相关资料,Vue分页功能的实现需要前端和后端共同配合完成,文中通过代码实例介绍的非常详细,需要的朋友可以参考下2023-09-09
vue 解决setTimeOut和setInterval函数无效报错的问题
这篇文章主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论