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

相关内容

热门资讯

不靠简历，四十多岁再进职场 文/竹林（识局微信公共账号zhijuzk）四十多岁的老王近些年一直创业，但最近重新找到了工作，简历在...
洪九果品年底港交所除牌：多份财... 中国“水果第一股”即将告别资本市场。12月24日，香港联交所宣布，将于2025年12月30日上午9时...
千亿石药集团“二代接班”！砸4... 2024年开始，石药集团的业绩便出现营利“双降”。作者 | 孙梦圆编辑丨于婞来源 | 野马财经千亿药...
2025年全球富豪大盘点：马斯... 本文来源：时代周报 作者：马欢全球首富更富有了。《福布斯》实时亿万富豪榜显示，截至2025年12月2...
年末物价涨的钱，打工人想靠投资... 本文来源：时代周报 作者：李杭最近两个月，不少人察觉到日常生活中的很多东西都在悄悄涨价。麦当劳里打工...
最可能打败马斯克的中国人，清华... 出品丨花朵财经观察（FF-Finance）撰文丨学研说起商业航天，大伙肯定第一时间想到马斯克的Spa...
长芯博创：2025年业绩与股价... 通过对长芯盛的股权收购，长芯博创（300548.SZ）完成了从光电子器件厂商向多领域光通信解决方案提...
吴晓求：“十五五”资本市场改革... 吴晓求 中国人民大学国家金融研究院院长、国家一级教授本文转载自12月20日腾讯网。本文字数：411...
两年9次高管更迭，创始人减持淡... 本报（chinatimes.net.cn）记者王瑜 于娜 北京报道12月22日，浙江康恩贝制药股份有...
吉峰科技在盐城成立低空科技公司... 新京报贝壳财经讯 12月24日，企查查APP显示，近日，吉峰低空科技(盐城)有限公司成立，注册资本5...