位置: 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如何学)

  • iqoo8怎么设置Super Audio(iqoo8怎么设置锁屏壁纸)

    iqoo8怎么设置Super Audio(iqoo8怎么设置锁屏壁纸)

  • 微信点在看别人可以看到吗(微信点在看别人能看见吗)

    微信点在看别人可以看到吗(微信点在看别人能看见吗)

  • airpods二代后面按钮有什么用(airpods二代后面的按钮按不下去)

    airpods二代后面按钮有什么用(airpods二代后面的按钮按不下去)

  • qq电话怎么屏蔽对方声音(qq电话怎么屏蔽环境音)

    qq电话怎么屏蔽对方声音(qq电话怎么屏蔽环境音)

  • 华为手机怎么找最近删除的照片(华为手机怎么找回)

    华为手机怎么找最近删除的照片(华为手机怎么找回)

  • 抖音直播送小心心花钱吗(抖音直播送小心心一个多少钱)

    抖音直播送小心心花钱吗(抖音直播送小心心一个多少钱)

  • 拼多多取消订单步骤(拼多多取消订单在哪里)

    拼多多取消订单步骤(拼多多取消订单在哪里)

  • 小米8突然无法识别卡(小米突然无法超级快充)

    小米8突然无法识别卡(小米突然无法超级快充)

  • 手机相册图片怎么剪切不要的部分(手机相册图片怎么拼图)

    手机相册图片怎么剪切不要的部分(手机相册图片怎么拼图)

  • 您的设备与此版本不兼容(您的设备与此版本不兼容什么意思)

    您的设备与此版本不兼容(您的设备与此版本不兼容什么意思)

  • vivitek是什么牌子的投影仪(vicomtea属于什么档次)

    vivitek是什么牌子的投影仪(vicomtea属于什么档次)

  • 苹果11跟xr屏幕一样吗(苹果11pro 屏幕多少寸)

    苹果11跟xr屏幕一样吗(苹果11pro 屏幕多少寸)

  • 微信文件保存几天(微信文件保存几天失效)

    微信文件保存几天(微信文件保存几天失效)

  • 手机屏幕触摸没反应是哪里出问题了(手机屏幕触摸没反应怎么办)

    手机屏幕触摸没反应是哪里出问题了(手机屏幕触摸没反应怎么办)

  • ipadpencil怎么看电量(iPadpencil怎么看保修)

    ipadpencil怎么看电量(iPadpencil怎么看保修)

  • 老人机怎么设置亲情号码(老人机怎么设置来电播报名字)

    老人机怎么设置亲情号码(老人机怎么设置来电播报名字)

  • vivo通话设置在哪里(vivo手机通话设置在哪里)

    vivo通话设置在哪里(vivo手机通话设置在哪里)

  • wpsoffice怎么换字体(wpsoffice怎么换字体颜色)

    wpsoffice怎么换字体(wpsoffice怎么换字体颜色)

  • 快手有赞订单怎么删除(快手有赞订单怎么查询不到)

    快手有赞订单怎么删除(快手有赞订单怎么查询不到)

  • 高德导航信号弱不能导航怎么解决(导航gps信号弱怎么办)

    高德导航信号弱不能导航怎么解决(导航gps信号弱怎么办)

  • qq怎么改生日(手机qq怎么改生日)

    qq怎么改生日(手机qq怎么改生日)

  • 手机6g和4g有什么区别(手机6g和4g哪个好)

    手机6g和4g有什么区别(手机6g和4g哪个好)

  • Python标准库之os(python标准库在哪个目录)

    Python标准库之os(python标准库在哪个目录)

  • 递延所得税资产和递延所得税负债
  • 资本公积转增资本的限制条件
  • 暂估成本跨年后收到票汇算清缴
  • 税金及附加主要分析
  • 电商存货周转率的正常范围
  • 签证费怎么支付
  • 被收购的收入计什么科目
  • 固定资产属于净资产的哪一项
  • 缴纳公积金工资基数
  • 建筑业异地预交税款怎么入库
  • 退休人员返聘工资交个人所得税标准
  • 发票是不是都一样
  • 企业什么税可以退
  • 本年利润年末怎么结转到利润分配
  • 个税退税手续费税率
  • 作废发票如何管理
  • 固定资产销售账务处理的例题
  • 车间低值易耗品有哪些
  • 零申报工会经费滞纳金怎么算
  • 危险废物处置是冶金行业吗
  • u启动怎么装机
  • php字符串函数大全
  • 小微企业减免额怎么计算
  • phpurl编码
  • 股份有限公司向股东借款
  • php生成php文件
  • 房产开发企业涉及税种
  • php md5加盐
  • paypal付款会自动换汇吗
  • 动产租赁增值税税率最新
  • siri怎么重置主人声音ios13
  • 怎么配置tomcat服务器
  • phpsession和cookie
  • flex布局实现垂直居中
  • 员工多交的个人社保
  • 基于个人同意处理个人信息的个人什么撤回其同意
  • 深度学习分析NASA电池数据(1 数据读取)
  • WIN11系统CPU占用率高
  • 委托代销商品委托方和受托方会计分录
  • 应付职工薪酬怎么冲平
  • java开发从入门到精通
  • 增值税普通发票税率
  • 年末结转增值税明细
  • 给中间人回扣犯罪吗
  • 小规模纳税人季度不超30万免增值税
  • 期权分为哪几种
  • 营业外收入如何纳税
  • 单位收到已交个人社保
  • 异地车辆登记证书怎么补办
  • 会计凭证中的数字怎么填
  • 没有发票的费用怎么报销
  • 销售退货会计分录
  • 小规模纳税人取得普通发票可以抵扣吗
  • 税收优惠退回的税金怎么入账
  • 项目前期的研发费用
  • 微信转账没有显示对方的名字怎么办
  • 福利费可以直接发钱吗
  • 代理服务费计入什么科目
  • 基金会对外捐赠,对方开什么发票
  • 大额往来款项的认定
  • 支付宝企业账户在哪里查看
  • 技术转让要交所得税吗
  • 收到银联商务客户短信
  • 个体工商户如何给员工交五险一金
  • 安装win7需要激活吗
  • winxp系统怎么设置默认账户登入
  • 进程aissca.exe
  • win8.1系统HDMI高清线连接电视后没有声音的原因及解决办法
  • 电脑无法使用qq
  • 微软官方升级win10
  • win7系统打印机共享给win10
  • wind安装
  • 第一次接触怎么形容
  • django 自定义权限管理
  • 安卓中textview
  • js校验密码复杂度
  • javascript学习指南
  • 江苏国税电子税局
  • 电信追缴欠费的工作方案有哪些
  • 税收与税收管理的关系
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设