解决在vue3中使用reactive响应式，赋值后造成页面不改变的问题？
创始人
2025-05-28 21:32:23
0次

文章目录

  • 场景原因
  • 一、例子
  • 二、解决方法
    • 1、使用ref存储响应式数据
    • 2、在reactive中使用对象包裹要改变的数据
    • 3、for of循环push到reactive数据中，不破坏数据结构
  • 总结

场景原因

我们需要在vue3中使用服务器的数据渲染到页面上，我使用的是reactive生成的响应式数据属性，但是在挂载后请求的数据并没有渲染显示到页面上。

技术：vue3 、 element-ui-plus

一、例子

home.vue

在这里插入图片描述
我们通过直接赋值，可以看出数据变为普通的数据了，并不是响应式的。

二、解决方法

1、使用ref存储响应式数据

代码如下：

在这里插入图片描述
可以看出打印出的数据是经过ref劫持的数据，是响应式的。

2、在reactive中使用对象包裹要改变的数据

代码如下：

在这里插入图片描述
使用这种方式，数据也是响应式的。

3、for of循环push到reactive数据中，不破坏数据结构

代码如下：

在这里插入图片描述

总结

主要的问题就是使用reactive生成的响应式数据，在直接赋值时把响应式数据给替换为了普通数据了，导致无法监听数据的变化。

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：外资重返港股市场，长线资金主导明星IPO 外资重回市场风口股 港股市场升温多只明星股ipo获热捧

下一篇：10万瓶一周抢售一空！云南“见手青啤酒”卖疯，背后代工厂竟欠债400万？ 10万瓶一周抢售一空！云南“见手青啤酒”卖疯，背后代工厂竟欠债400万？

相关内容

热门资讯

吹风机养生：真能顶得上老中医吗... 近年来，社交平台上流行起了“吹风机养生”的说法，许多博主宣称用吹风机对着特定的穴位吹热风，可以温阳驱...
深夜王炸，GPT-5.5发布 财联社 美东时间周四，OpenAI公布了其最新的人工智能模型——GPT-5.5。该公司表示，该模型在...
台湾同胞参加海军成立77周年纪... 4月23日，台湾同胞登上海军舰艇参观并与海军军官合影留念。新华社记者 李杰 摄 新华社青岛4月23日...
特朗普：这世界疯了 美国司法部当地时间4月23日证实，参与强行控制并转移委内瑞拉总统马杜罗的美国陆军特种部队军士长甘农·...
从冲击千亿市值到被申请破产重整... 图/ic 八年亏损超84亿元！“中国影视第一股”华谊兄弟被申请重整。 4月23日晚，华谊兄弟传媒股份...
“保安与停车女子和好接吻”，A... 撰稿/苏士仪（媒体人） 编辑/王言虎 校对/王心 ▲女司机与保安发生肢体冲突一事，持续引发关注。图...
美伊冲突前景不明 国际油价再度... 当地时间4月24日，由于美国与伊朗冲突前景仍不明朗，市场避险情绪升温，国际油价再度上涨。布伦特原油上...
美军向伊朗商船开火 伊军：将予...
美国发生群体性枪击事件，8名1... 新华社消息，美国路易斯安那州什里夫波特市19日发生一起群体性枪击事件，造成8名儿童死亡，枪手被警方击...
274亿美金砸向核武器，威慑还... 文︱陆弃 能源部长克里斯·赖特在2026年4月16号的一场公开场合称，美国正在推进的核武器现代化计划...