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

  • 企业所得税和增值税重复收税了吗
  • 税务行政复议是税务行政复议机关的裁决活动
  • 水泥建材公司
  • 接受投资材料
  • 会计凭证包括哪三种
  • 报税期能不能开发票
  • 冲红发票怎么写备注
  • 民非企业附加税入什么科目
  • 票据贴现的账务处理案例
  • 固定资产期初余额在哪里录入
  • 初始数据试算表不平衡的原因
  • 股东变动及股东情况章节
  • 营改增后增加了什么征税项目
  • 以股权转让名义转让土地使用权
  • 增值税负数如何计算
  • 小规模纳税人进项税额怎么处理
  • 集团统借统还利息
  • 购进免税农产品再销售免税吗
  • 异地本行转账
  • 固定资产折旧应该考虑哪些因素
  • 实物捐赠的企业有哪些
  • 如何解决win7系统不稳定
  • 二年级祖先的摇篮教学视频
  • php代码大全及其含义
  • 日落时分谭咏麟歌词
  • 税务稽查的进项税怎么处理
  • Joomla调用系统自带编辑器的实现方法
  • 开票缴纳的1%个税是多少
  • 长期待摊费用的摊销方法
  • vue3 原理
  • ajax自动带cookie
  • laravel 自定义guard
  • 详解php归并排序数据
  • 取得不规范发票的处理
  • 货物出库入库怎么记账
  • 帝国cms中英
  • mongodb 教程
  • 个税 全年累计
  • 完税证明可以做为证据使用吗
  • sql 列数
  • 外购产品捐赠
  • sql server搜索语句
  • 房地产企业土地增值税清算
  • 2019年印花税减半征收条件
  • 行政单位与事业单位净资产的比较
  • 行政单位应缴预算款原则上按月缴清
  • 佣金支出和手续费一样吗
  • 售后租回交易的表述
  • 营改增小规模纳税人可以进行税额扣除
  • 挂靠人员社保缴费分录如何做?
  • 哪些商业保险可以抵扣个税
  • 建造合同收入怎么算
  • 接到国外的电话是怎么回事
  • 当前旅游业
  • 建筑机械使用安全规范最新版
  • 好用的sql工具
  • mysql5.7.29安装
  • win8安全中心在哪
  • mac怎样解压rar
  • FreeBSD su Sorry问题解决办法
  • linuxvi编辑器三种模式
  • wlms.exe是什么
  • xp系统插u盘没反应怎么解决
  • ubuntu wine安装的软件怎么运行
  • Win10 Mobile/PC build 10586.589曝光:老机型有份
  • gws.exe是啥
  • 收不到windows的验证码
  • 迅雷看看电脑版 下载
  • linux中安装软件可使用哪些方式
  • Unity3d Asset Serialization 设置错误导致SVN文件不能同步
  • perl里怎么对数组实现一次遍历
  • opengl教程48讲
  • python 二叉堆
  • javascript引用值
  • 玉林税务局班子成员
  • 纳税人识别号不能含有IOZSV
  • 消费税征税环节
  • 个人绩效考核税务局
  • 成都市青羊区国有资产监督管理办公室
  • 财税[2016]36号文营业税改征增值税试点实施办法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设