vue3使用reactive赋值后页面不改变怎么解决

这篇文章主要介绍了vue3使用reactive赋值后页面不改变怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3使用reactive赋值后页面不改变怎么解决文章都会有所收获，下面我们一起来看看吧。

场景原因

我们需要在vue3中使用服务器的数据渲染到页面上，我使用的是reactive生成的响应式数据属性，但是在挂载后请求的数据并没有渲染显示到页面上。

技术：vue3 、 element-ui-plus

一、例子

home.vue

<template><divclass=&quotmon-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)inparmar.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)initem.children":key="item2.id"><el-icon><Menu/></el-icon>{{item2.authName}}</el-menu-item></el-sub-menu></el-menu></div></template><scriptsetup>//引入模块import{reactive,onMounted}from'vue'import{useRouter}from'vue-router'importhttpfrom'@/utils/request'constrouter=useRouter();letmenusList=reactive([]);onMounted(()=>{getData()})constgetData=async()=>{let{data}=awaithttp.get('/menus');//这里直接赋值，会导致menusList失去响应式了menusList=data.data;console.log(menusList);}constchangeMenu=(key)=>{router.push('/home/'+key)}</script><stylelang="less"scoped>mon-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>

我们通过直接赋值，可以看出数据变为普通的数据了，并不是响应式的。

二、解决方法

1、使用ref存储响应式数据

代码如下：

<scriptsetup>//引入模块import{ref,reactive,onMounted}from'vue'importhttpfrom'@/utils/request'letmenusList=ref([]);onMounted(()=>{getData()})constgetData=async()=>{let{data}=awaithttp.get('/menus');//这里直接赋值value，在页面上直接使用menusList即可！menusList.value=data.data;}</script>

可以看出打印出的数据是经过ref劫持的数据，是响应式的。

2、在reactive中使用对象包裹要改变的数据

代码如下：

<scriptsetup>//引入模块import{reactive,onMounted}from'vue'importhttpfrom'@/utils/request'letparmar=reactive({menus:[]});onMounted(()=>{getData()})constgetData=async()=>{let{data}=awaithttp.get('/menus');//这里直接赋值对象里面的数据，就不会造成把响应式替换掉的情况了，直接在页面上通过parmar.menus使用数据！parmar.menus=data.data;console.log(parmar);}</script>

使用这种方式，数据也是响应式的。

3、for of循环push到reactive数据中，不破坏数据结构

代码如下：

<scriptsetup>//引入模块import{reactive,onMounted}from'vue'importhttpfrom'@/utils/request'letmenusList=reactive([])onMounted(()=>{getData()})constgetData=async()=>{let{data}=awaithttp.get('/menus');for(letiofdata.data){menusList.push(i);}console.log(menusList);}</script>

关于“vue3使用reactive赋值后页面不改变怎么解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3使用reactive赋值后页面不改变怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。

上一篇：Spring?Boot项目中怎么使用OpenAI-Java

下一篇：Java中怎么使用ConcurrentHashMap实现线程安全的Map

---