Vue3中使用reactive時后端有返回數據但dom沒有更新如何解決

本篇內容主要講解“Vue3中使用reactive時后端有返回數據但dom沒有更新如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3中使用reactive時后端有返回數據但dom沒有更新如何解決”吧!

使用reactive時,后端有返回數據但dom沒有更新

問題

在Vue3的setup中使用reactive更新數據，但是dom沒有更新問題

代碼：

<template>
    <div class="aside">
        <div class="collpase-btn" @click="collpaseMenu">
            <el-icon><fold /></el-icon>
        </div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            :collapse="store.state.isCollapse"
            @open="handleOpen"
            @close="handleClose"
        >
            <el-sub-menu :index="item.id" v-for="item in menus" :key="item.id">
                <template #title>
                    <el-icon><grid /></el-icon>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item :index="it.id" v-for="it in item.subMenuList">{{it.title}}</el-menu-item>
            </el-sub-menu>
 
        </el-menu>
    </div>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex';
 
export default defineComponent({
    name:'Aside',
    setup() {
        const store = useStore();
        const mensList:any = [];
        let menus = reactive(mensList);
        
        const handleOpen = (key: string, keyPath: string[]) => {
 
        }
        const handleClose = (key: string, keyPath: string[]) => {
            
        };
        const collpaseMenu = () => {
            store.dispatch('collpaseChange');
        };
        onMounted(() => {
            axios.get('/user/menu').then(res => {
            menus.mensList = res.data.menusList;
        });
        });
        return {
            handleOpen,
            handleClose,
            collpaseMenu,
            store,
            menus
        }
    },
})
</script>
 
<style lang="scss" scoped>
.el-menu-item.is-active{
    background-color: var(--el-menu-hover-bg-color);;
}
.collpase-btn{
   text-align: center;
    width: 100%;
    padding: 10px 0px;
    cursor: pointer;
    .el-icon{
        color: white;
        font-size: 24px;
    }
}
</style>

直接使用reactive()一個空數組，改變當前值時，頁面不會自動刷新。

解決辦法

使用reactive時，將參數變為一個對象形式，而不是單純的數組。

當改為傳入對象包裹后，頁面正常顯示：

關于vue3中reactive的意義

在學習Vue3的時候產生疑問：

const addForm = reactive({ // 這里面的reactive啥意思
  sysPre: null,
  diaPre: null,
  tem: null
})

查詢解決

在Vue3中，響應式對象是指通過reactive函數轉換而來的對象，它的屬性可以被Vue自動監測，當屬性值發生變化時，Vue會自動更新相關的視圖。這個過程是通過Vue內部實現的響應式系統來完成的。

響應式對象的意義在于使得開發者可以更加方便地管理和操作數據。當數據被轉換為響應式對象后，我們可以直接修改對象的屬性值，而不需要手動調用Vue的更新函數來更新視圖。這樣可以極大地提高開發效率，讓開發者更加專注于業務邏輯的實現。

此外，響應式對象還可以與Vue的模板語法、組件等功能無縫銜接，使得我們可以通過組合使用響應式對象和Vue的其他功能，快速開發出高效、可維護的應用程序。

在這段代碼中，addForm對象被使用reactive函數轉換為一個響應式對象。這意味著當addForm對象的屬性sysPre，diaPre或tem發生變化時，相關的依賴將會自動更新，如綁定在模板中的表單輸入框等。

到此，相信大家對“Vue3中使用reactive時后端有返回數據但dom沒有更新如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！