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

  • 小微企业所得税费用怎么算
  • 资产损失税前扣除及纳税调整明细表
  • 企业所得税退税的会计分录怎么做
  • 产值利税率是什么
  • 金税四期监控个人在银行的存款吗
  • 如何确定固定资产的原始价值
  • 应收款时间太长怎么处理
  • 知识产权申报费用多少钱
  • 库存商品赠送给客户要开票吗
  • 零申报企业年报资产总额怎么填
  • 待认证进项分录
  • 企业所得税利润总额和财务报表利润总额不一致
  • 企业发生的间接生产费用应
  • 购买电脑的方案
  • 预提费用 增值税
  • 营改增后还有营业费用吗
  • 给职工买的意外险怎么做账
  • 流转税率是什么意思
  • 退役士兵增值税优惠申报方法
  • 房屋大修理费用指哪些
  • 出口布料有退税吗
  • 航天维护费全额抵扣
  • 企业支付微信认证怎么弄
  • 华硕主板进入bios设置
  • 个人销售自己使用过的物品免征增值税
  • Windows10如何禁止电脑自动安装软件
  • 电脑耳机插上还是外放,重启就可以
  • info.exe
  • 发出商品但货款没到账
  • 扩展组件可以删除吗
  • 巴伐利亚森林国家公园钍自然真正自然
  • codewriter怎么运行
  • 搜索神器官网
  • php随机抽取
  • vue 百度地图 移动端
  • php如何上传1个g以上的文件
  • php数据库分页是怎么实现的
  • 万字长文护国安是谁写的
  • php+web
  • 支付广告费没有票怎么入账
  • python中列表的作用
  • ❤️国庆假期快到了,用python写个倒计时程序,助你熬到假期!❤️
  • 税控盘技术服务费抵扣期限
  • 坏账计提方法会计政策
  • 商业印花税的计算公式
  • mysql怎么恢复数据
  • 公司注销未分配利润如何处理
  • 无形资产未确认融资费用例题
  • 转让不动产增值税征收管理办法
  • 零申报报表怎么填写
  • 应收账款周转率越大越好还是越小越好
  • 运输途中丢失的物品赔偿
  • 全资子公司并入母公司
  • 个人保险发票能做账吗
  • 生物性资产是什么科目
  • 管理费用是负数怎么处理
  • 销售商品托收承付怎么确认收入
  • 非常详细的魔方公式图解
  • windows隐藏文件夹开启
  • linux的用户
  • vmware怎么放大虚拟机
  • win7系统修改
  • window10打开rar文件
  • 怎么彻底删除win11安全中心
  • SMax4PNP.exe - SMax4PNP是什么进程
  • Win7的sysprep工具怎么用 win7自带sysprep工具重置系统方法
  • win7打开
  • fsc文件用什么软件打开
  • javascript例题
  • 浅析科学发展观的核心立场
  • node.js ts
  • javascript中的函数
  • python做开发
  • 企业所得税税率10%
  • 1988年中华人民共和国印花税票五元
  • 河南省地方税务局电话
  • 深圳罗湖区公安局长安慧君简历
  • 江苏省的发票如何查验真伪
  • 车价为150万的进口车型
  • 刚成立小公司的流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设