解决在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万？

相关内容

热门资讯

黑科技作弊器！多乐跑得快(作弊... 黑科技作弊器！多乐跑得快(作弊器),快乐碰胡竟然是有透视挂app（有辅助挂辅教程）多乐跑得快辅助器是...
黑科技外挂！闲娱(外挂),福星... 黑科技外挂！闲娱(外挂),福星游戏都是是有透视挂技巧（有辅助挂工具）1、每一步都需要思考，不同水平的...
黑科技透视挂！人民棋牌(透视挂... 黑科技透视挂！人民棋牌(透视挂),吉安麻将原来是真的有透视挂脚本（有辅助挂技术）人民棋牌透视方法中分...
黑科技开挂！飞禽走兽(开挂),... 黑科技开挂！飞禽走兽(开挂),新永和竟然存在有透视挂插件（有辅助挂app）1、许多玩家不知道飞禽走兽...
黑科技辅助器！心悦联盟(辅助器... 黑科技辅助器！心悦联盟(辅助器),玉兔追月果然是真的有透视挂方法（有辅助挂方略）亲，关键说明，心悦联...
黑科技透视挂！新九天(透视挂)... 黑科技透视挂！新九天(透视挂),宝宝浙江果然有透视挂攻略（有辅助挂教学）一、宝宝浙江游戏安装教程牌型...
黑科技辅助！众亿(辅助),宁波... 黑科技辅助！众亿(辅助),宁波竞技馆好像存在有透视挂插件（有辅助挂教学）宁波竞技馆破解侠是真的助透视...
黑科技辅助器！好运棋牌(辅助器... 黑科技辅助器！好运棋牌(辅助器),孔雀互娱果然真的有透视挂脚本（有辅助挂解密）一、好运棋牌可以开透视...
黑科技辅助！星河阁(辅助),同... 黑科技辅助！星河阁(辅助),同城乐吧一贯真的有透视挂攻略（有辅助挂助手）1、同城乐吧免费脚本咨询教程...
黑科技作弊器！271(作弊器)... 黑科技作弊器！271(作弊器),扑克王原来有透视挂技巧（今日头条辅助）1、进入到扑克王是否有挂之后，...