位置: IT常识 - 正文

解决在vue3中使用reactive响应式,赋值后造成页面不改变的问题?(vue3 $bus)

编辑:rootadmin
解决在vue3中使用reactive响应式,赋值后造成页面不改变的问题? 文章目录场景原因一、例子二、解决方法1、使用ref存储响应式数据2、在reactive中使用对象包裹要改变的数据3、for of循环push到reactive数据中,不破坏数据结构总结场景原因

推荐整理分享解决在vue3中使用reactive响应式,赋值后造成页面不改变的问题?(vue3 $bus),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3技巧,vue3 onmounted,vue3解决了什么问题,在使用vue碰到的坑,vue3解决了什么问题,在使用vue碰到的坑,vue3解决了什么问题,在使用vue碰到的坑,内容如对您有帮助,希望把文章链接给更多的朋友!

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

技术:vue3 、 element-ui-plus

一、例子

home.vue

<template> <div class="common-layout"> <el-menu @select="changeMenu" :collapse="isCollapse" active-text-color="#409eff" background-color="#333744" class="el-menu-vertical-demo" default-active="2" text-color="#fff" :unique-opened="true"> <el-sub-menu :index="item.path" v-for="(item) in parmar.menus" :key="item.id"> <template #title> <el-icon> <List /> </el-icon> <span>{{ item.authName }}</span> </template> <el-menu-item :index="item2.path" v-for="(item2) in item.children" :key="item2.id"> <el-icon> <Menu /> </el-icon> {{ item2.authName }} </el-menu-item> </el-sub-menu> </el-menu> </div></template><script setup>// 引入模块import { reactive, onMounted } from 'vue'import { useRouter } from 'vue-router'import http from '@/utils/request'const router = useRouter();let menusList = reactive([]);onMounted(() => { getData()})const getData = async () => { let { data } = await http.get('/menus'); // 这里直接赋值,会导致menusList失去响应式了 menusList = data.data; console.log(menusList);}const changeMenu = (key) => { router.push('/home/' + key)}</script><style lang="less" scoped>.common-layout { height: 100vh; box-sizing: border-box; position: relative; overflow: hidden; /deep/.el-menu--vertical { margin: 0; border-right: none !important; overflow-x: hidden; height: calc(100vh - 100px); user-select: none; } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; }}</style>解决在vue3中使用reactive响应式,赋值后造成页面不改变的问题?(vue3 $bus)

我们通过直接赋值,可以看出数据变为普通的数据了,并不是响应式的。

二、解决方法1、使用ref存储响应式数据

代码如下:

<script setup>// 引入模块import { ref, reactive, onMounted } from 'vue'import http from '@/utils/request'let menusList = ref([]);onMounted(() => { getData()})const getData = async () => { let { data } = await http.get('/menus'); // 这里直接赋值value,在页面上直接使用menusList即可! menusList.value = data.data;}</script>

可以看出打印出的数据是经过ref劫持的数据,是响应式的。

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

代码如下:

<script setup>// 引入模块import { reactive, onMounted } from 'vue'import http from '@/utils/request'let parmar = reactive({ menus: [ ]});onMounted(() => { getData()})const getData = async () => { let { data } = await http.get('/menus'); // 这里直接赋值对象里面的数据,就不会造成把响应式替换掉的情况了,直接在页面上通过parmar.menus使用数据! parmar.menus = data.data; console.log( parmar);}</script>

使用这种方式,数据也是响应式的。

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

代码如下:

<script setup>// 引入模块import { reactive, onMounted } from 'vue'import http from '@/utils/request'let menusList = reactive([])onMounted(() => { getData()})const getData = async () => { let { data } = await http.get('/menus'); for (let i of data.data){ menusList.push(i); } console.log(menusList);}</script>

总结

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

本文链接地址:https://www.jiuchutong.com/zhishi/300223.html 转载请保留说明!

上一篇:Vue 国际化之 vue-i18n 的使用(vue国际化占位符)

下一篇:PyTorch学习系列教程:何为Tensor?(pytorch如何学)

  • 如何恢复微信支付通知(如何恢复微信支付功能设置)

    如何恢复微信支付通知(如何恢复微信支付功能设置)

  • 抖音注销后还有粉丝吗(抖音注销后还有IP地址吗)

    抖音注销后还有粉丝吗(抖音注销后还有IP地址吗)

  • 腾讯视频怎么超前点播(腾讯视频怎么超清都不清楚了)

    腾讯视频怎么超前点播(腾讯视频怎么超清都不清楚了)

  • 荣耀10x支持wifi6吗(荣耀10x支持多少瓦快充)

    荣耀10x支持wifi6吗(荣耀10x支持多少瓦快充)

  • 小米平板微信打不开怎么回事(小米平板微信打视频窗口不见了)

    小米平板微信打不开怎么回事(小米平板微信打视频窗口不见了)

  • 华为p30pro屏幕模糊解决(华为p30pro屏幕模糊)

    华为p30pro屏幕模糊解决(华为p30pro屏幕模糊)

  • 给别人开热点费电吗(给别人开热点费电还是自己玩费电)

    给别人开热点费电吗(给别人开热点费电还是自己玩费电)

  • 华为nova5支持内存卡吗(华为nova5z支持内存卡吗)

    华为nova5支持内存卡吗(华为nova5z支持内存卡吗)

  • 华为手机如何消除talkback(华为手机如何消除照片多余的人)

    华为手机如何消除talkback(华为手机如何消除照片多余的人)

  • 天猫精灵ccl怎么用(天猫精灵CCL怎么扩展内存)

    天猫精灵ccl怎么用(天猫精灵CCL怎么扩展内存)

  • 支付宝人脸支付怎么取消(支付宝人脸支付怎么设置)

    支付宝人脸支付怎么取消(支付宝人脸支付怎么设置)

  • 苹果备忘录如何查字数(苹果备忘录如何转发微信)

    苹果备忘录如何查字数(苹果备忘录如何转发微信)

  • 淘宝新书拆封了可以换吗(新书拆封了还能退吗)

    淘宝新书拆封了可以换吗(新书拆封了还能退吗)

  • 拼多多极速退款系统审核规则(拼多多极速退款商家申诉能追回钱来吗)

    拼多多极速退款系统审核规则(拼多多极速退款商家申诉能追回钱来吗)

  • 抖音怎么挂小黄车(抖音怎么挂小黄车上链接)

    抖音怎么挂小黄车(抖音怎么挂小黄车上链接)

  • 苹果手机有息屏时钟吗(苹果手机屏幕不受控制)

    苹果手机有息屏时钟吗(苹果手机屏幕不受控制)

  • 中国5g牌照发放时间(5g牌照发放哪几个公司 6月6日)

    中国5g牌照发放时间(5g牌照发放哪几个公司 6月6日)

  • oppoa9语音助手在哪里(oppoa9语音助手在哪里设置)

    oppoa9语音助手在哪里(oppoa9语音助手在哪里设置)

  • 无法找到脚本文件解决方法(无法找到脚本文件c:\windows\system32)

    无法找到脚本文件解决方法(无法找到脚本文件c:\windows\system32)

  • Win11如何使用自带截图功能?Win11自带截图功能使用三种方法(win11如何设置开机自启动软件)

    Win11如何使用自带截图功能?Win11自带截图功能使用三种方法(win11如何设置开机自启动软件)

  • 【Vue/Js】如何解决谷歌浏览器(chrome)扩展插件安装后,再打开自动消失问题(两种解决方案)(vue技术解密)

    【Vue/Js】如何解决谷歌浏览器(chrome)扩展插件安装后,再打开自动消失问题(两种解决方案)(vue技术解密)

  • 如何做好系统备份 重装系统需要备份哪些文件(如何做好系统备案工作)

    如何做好系统备份 重装系统需要备份哪些文件(如何做好系统备案工作)

  • BascsTray.exe进程是什么文件产生的 BascsTray进程信息查询(bassmod.dll)

    BascsTray.exe进程是什么文件产生的 BascsTray进程信息查询(bassmod.dll)

  • 深度学习:图像去雨网络实现Pytorch (二)一个简单实用的基准模型(PreNet)实现

    深度学习:图像去雨网络实现Pytorch (二)一个简单实用的基准模型(PreNet)实现

  • 增值税纳税义务确认时间
  • 教育培训行业税负率是多少
  • 当月销售下月开票如何做账分录
  • 环保税申报表怎么填制
  • 公司组织运动会后的感想
  • 销售免税产品要计算销项税吗
  • 一般纳税人要做价税分离吗
  • 工业企业外购存货的入账价值一般包括增值税吗
  • 环境保护税税率
  • 注销公司房产税从哪年从哪年开始交
  • 小规模代开增值税专票开错了如何处理?
  • 企业所得税汇算交所得税如何做账务处理
  • 金融公司一般有哪些业务
  • 应付账款和预付账款都是企业的债权
  • 政府单位没有税号怎么开普票
  • 购入的财务软件怎么入账
  • 纳税人依法可以享受减免税待遇而没有享受的
  • 开票的附加税是多少
  • 表彰比例如何确定
  • 机票电子普票不可以报销么
  • php版本升级
  • 出租的土地
  • 冲往年管理费用的账务处理是否涉及所得税
  • php魔术函数
  • 零售业如何盈利
  • jar启动指定启动类
  • php生成压缩包
  • “普罗旺斯”
  • 用smart原则改写年底前完善客户资料
  • 补缴房产税和土地使用税会计分录
  • vuex的五个属性及使用方法 简书
  • 开源模型:小羊驼(Vicuna-13B),可达chatGPT九成效果。
  • vue的内置组件
  • elementui动态表单数据回显
  • win10日历点不开
  • 进口设备退增值税
  • 一般纳税人在哪里报税
  • 以固定资产增资流程是怎样操作
  • 帝国cms视频教程
  • 织梦设置的关键词看不到
  • 小规模纳税人收入超过500万怎么办
  • 清卡后还可以勾选发票吗
  • 增值税防伪税控系统
  • 金融放贷工作具体做什么
  • 法人和税务可以是一个人吗
  • 员工工资怎么计提
  • 发票红冲重开是退个税吗
  • 以前年度多计提了费用
  • 个体生产经营所得税
  • 建筑施工企业检查的内容包括什么
  • 出资注意事项有哪些内容
  • 退回以前年度所得税账务处理
  • 知识产权服务费可以计入研发费用吗
  • 应收应付账款如何清理
  • 企业注销股东投资款怎么处理
  • 计提税金及附加的金额如何算
  • 银行承兑到期后怎么兑现
  • windows自带的
  • windows开机提示无法登录到你的账户
  • fedora14虚拟机安装教程
  • linux删除大量文件方法
  • win8系统启动项在哪
  • cpqeadm.exe是什么进程 可以关闭吗 cpqeadm进程查询
  • linux中压缩文件
  • incredr
  • windows7英雄联盟老是崩溃
  • windows7 运行
  • win10局域网无法上网
  • freebsd连接wifi
  • linux rpm -i
  • 应用web标准实例是什么
  • div+css与xhtml+css分别是什么意思?
  • pg搭建
  • unicode类型 python
  • python的字符串处理
  • python 两个列表一一对应
  • python语言文件
  • jQuery.Uploadify插件实现带进度条的批量上传功能
  • 地税局一般几点下班
  • 海淀属于哪个省?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设