首页 前端知识 【Vue3】Vue3中reactive变量重新赋值无法响应的三种处理方法(已解决)

【Vue3】Vue3中reactive变量重新赋值无法响应的三种处理方法(已解决)

2024-03-15 10:03:52 前端知识 前端哥 85 580 我要收藏

第一种解决方案:变量值包裹对象,加一个{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(不推荐)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3822.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!