Vue3中reactive变量重新赋值无法响应的3种处理方法
作者：敦厚的曹操
这篇文章主要给大家介绍了关于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变量重新赋值无法响应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！