vue3使用reactive賦值后頁面不改變

更新時間：2023年04月27日 09:42:13 作者：范德薩_

本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

場景原因

我們需要在vue3中使用服務(wù)器的數(shù)據(jù)渲染到頁面上，我使用的是reactive生成的響應(yīng)式數(shù)據(jù)屬性，但是在掛載后請求的數(shù)據(jù)并沒有渲染顯示到頁面上。

技術(shù)：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失去響應(yīng)式了
  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>

我們通過直接賦值，可以看出數(shù)據(jù)變?yōu)槠胀ǖ臄?shù)據(jù)了，并不是響應(yīng)式的。

二、解決方法

1、使用ref存儲響應(yīng)式數(shù)據(jù)

代碼如下：

<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>

可以看出打印出的數(shù)據(jù)是經(jīng)過ref劫持的數(shù)據(jù)，是響應(yīng)式的。

2、在reactive中使用對象包裹要改變的數(shù)據(jù)

代碼如下：

<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');
  // 這里直接賦值對象里面的數(shù)據(jù)，就不會造成把響應(yīng)式替換掉的情況了，直接在頁面上通過parmar.menus使用數(shù)據(jù)！
  parmar.menus = data.data;
  console.log( parmar);
}
</script>

使用這種方式，數(shù)據(jù)也是響應(yīng)式的。

3、for of循環(huán)push到reactive數(shù)據(jù)中，不破壞數(shù)據(jù)結(jié)構(gòu)

代碼如下：

<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>