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

  • 机动车发票税率怎么算
  • 金蝶eas怎么用
  • 房地产企业所得税预计毛利率
  • 2021新版利润表
  • 预借差旅费凭证填写
  • 营改增后建筑业怎么开票
  • 收到的货品与实体不符
  • 对以前年度的收入调整
  • 变更许可证情况说明书模板
  • 餐饮 专票
  • 房地产企业借款过多的原因
  • 隔年的费用发票怎样入账
  • 股票回购后多久注销
  • 2021印花税零申报怎么报
  • 小微企业工会经费的减免政策2023
  • 公司的净资产怎么看
  • 计入成本的有哪些科目
  • 收到劳务公司缴税怎么办
  • 定金转为货款金额需要特别约定吗?
  • 已使用固定资产出售增值税
  • 长期待摊未摊完处置如何账务处理
  • 房产税如何进行计提
  • 鸿蒙工具箱使用视频
  • 笔记本电脑应该关机还是睡眠
  • 购买固定资产发生的支出是资本性支出
  • frameworkservic.exe是什么进程 有什么作用 frameworkservic进程查询
  • 计算土地增值税时增值额的扣除项目包括
  • pavprsrv.exe - pavprsrv是什么进程 有什么用
  • 吃鸡到底用什么显卡性价比最高?
  • 支持h5浏览器
  • 促销费可以进项抵扣吗
  • 翡翠湾攻略
  • OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading “C:\ProgramData\Anaconda3\lib\site-packages\to
  • laslajas大教堂
  • php使用crypt()函数进行加密
  • mysql.php
  • 三万个字多久写完
  • 深度学习环境配置(pytorch版本)----超级无敌详细版(有手就行)
  • 培训机构账务处理
  • dedecms更新
  • java查询mongodb数据
  • 内资企业如何进国企
  • 个体户取现金的几种方法
  • 印花税技术合同包括什么
  • 代扣代缴增值税要交附加税吗
  • 外币账户记账方法
  • 转让股权需要缴纳哪些税
  • 应交增值税减免税款科目
  • 采购业务 货物收到 发票收到
  • 一般纳税人的进项税额可以抵扣吗
  • 修缮服务指什么
  • 投资性房地产公允价值变动借贷方向
  • sql语句如何将一列数据值相加
  • sqlserver临时表 效率
  • linux ipi
  • centos直接进入命令行
  • STMGR.EXE - STMGR是什么进程
  • mac新建窗口快捷键
  • 电脑pc的操作系统叫什么
  • win10如何禁用windows defender
  • win8.1无法安装net framework 3.5
  • linux bas
  • win8应用错误怎么办
  • Win7摄像头驱动程序
  • PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
  • jquery邮箱正则表达式
  • 人应该掌握的基本知识
  • nodejs mocha
  • 1.常用
  • 浅蓝色html代码
  • android 科大讯飞语音引擎 调用无响应
  • javascript点击按钮改变字体颜色
  • android上吹一吹功能的实现代码
  • javascript面向对象编程指南 pdf
  • 一般纳税人销售米面粮油税率
  • 江苏差旅费报销管理规定2021
  • 督察综合服务中心是干什么的
  • 厦门市无纸化税务局官网
  • 税务审理工作总结
  • 开票系统ukey抄报税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设