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

  • 跨月发票税率开错了如何处理合适?
  • 开专票了还能不能退款
  • 个人所得税查询工资与实际工资不符是为何
  • 财务刷卡手续费怎么处理
  • 平行结转分步法各步骤的费用
  • 其他应收款的对方科目有哪些
  • 贸易企业可以委托代理吗
  • 股东投入资金大,但不想成为法人
  • 业务招待费税前扣除比例
  • 工业固定资产折旧会计处理
  • 视同销售收入计入会计利润吗
  • 酒店前台冲账发生错误怎么办?
  • 补发工资计算公式
  • 应收账款周转率多少合适
  • 预付账款怎么做凭证
  • 开出增值税普通发票需要交税吗
  • 销售返利的税务政策
  • 季度企业所得税可以弥补以前年度亏损吗
  • 研发支出资本化的条件
  • 收到快递关税做什么科目
  • 党建工作经费计提比例
  • 公司经营权补偿款会计处理?
  • 餐饮业代金券怎么用
  • 社保基数如何计算单位和个人承担多少
  • windows10如何开机启动软件
  • win7电脑加入域
  • win10 5月更新已知bug
  • 无票收入后又开红字发票
  • 收到银行承兑汇票的账务处理
  • 领用材料已抵扣进项税
  • 啥叫同比增长
  • 资产处置收益科目借贷方向
  • 社会保险个人部分计入什么科目
  • 企业销售折扣在计征所得税时如何处理
  • php 中奖概率算法
  • 正在求偶的凤头卡拉鹰,美国德克萨斯州 (© Alan Murphy/Minden Pictures)
  • php 替换
  • 数据挖掘期末考试大纲
  • 如何在js中给字母排序
  • 增值税怎么算出来的
  • 税局通知纳税人的短信
  • 配电箱安装方法
  • 其他应付款贷方余额表示谁欠谁
  • 税收优惠属于政府补助
  • 个税申报漏报人怎么办
  • python深入浅出
  • 甲企业持有乙企业股票的市价为920000
  • 什么是债权人和债务人简单来说
  • 小规模纳税人能开3%的专票吗
  • 将资本公积转为资本会计科目
  • 工资总额范围怎么填写
  • 建筑行业现在还能斤不
  • 关税征收方式
  • 总公司给分公司拨款属于什么
  • 小规模纳税人本期应纳税额
  • 企业利润分配明细表
  • 员工预支工资属于什么科目
  • 注册资本和实收股本的区别
  • 其他费用包括哪些内容
  • 国库单一账户体系包括哪些账户
  • vmware虚拟机怎么克隆
  • 跨网段加入域配置
  • ubuntu怎么用
  • 安装操作系统win10
  • Windows PC用iCloud多设备共享数据图文教程
  • 在win7操作系统中通过什么可以查看计算机的配置
  • win7旗舰版使用ie8特别卡怎么回事?
  • Windows 8.1 RT Update 3更新将于9月发布
  • ,linux
  • win8启动后的初始界面
  • vc6.0安装教程win8
  • javascript概述及作用
  • jquery图片轮播视频
  • 右键打开方式里没有word
  • js使文本框失去焦点的方法
  • javascript要怎么学
  • java script入门
  • JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
  • 代建工程如何缴纳增值税
  • 如何在国税网查看社保人员信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设