Vue3中使用reactive時(shí),后端有返回?cái)?shù)據(jù)但dom沒(méi)有更新的解決

更新時(shí)間：2023年03月28日 09:06:20 作者：liguoyuan819

這篇文章主要介紹了Vue3中使用reactive時(shí),后端有返回?cái)?shù)據(jù)但dom沒(méi)有更新的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用reactive時(shí),后端有返回?cái)?shù)據(jù)但dom沒(méi)有更新

問(wèn)題

在Vue3的setup中使用reactive更新數(shù)據(jù)，但是dom沒(méi)有更新問(wèn)題

代碼：

<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()一個(gè)空數(shù)組，改變當(dāng)前值時(shí)，頁(yè)面不會(huì)自動(dòng)刷新。

解決辦法

使用reactive時(shí)，將參數(shù)變?yōu)橐粋€(gè)對(duì)象形式，而不是單純的數(shù)組。

當(dāng)改為傳入對(duì)象包裹后，頁(yè)面正常顯示：

關(guān)于vue3中reactive的意義

在學(xué)習(xí)Vue3的時(shí)候產(chǎn)生疑問(wèn)：

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

查詢(xún)解決

在Vue3中，響應(yīng)式對(duì)象是指通過(guò)reactive函數(shù)轉(zhuǎn)換而來(lái)的對(duì)象，它的屬性可以被Vue自動(dòng)監(jiān)測(cè)，當(dāng)屬性值發(fā)生變化時(shí)，Vue會(huì)自動(dòng)更新相關(guān)的視圖。這個(gè)過(guò)程是通過(guò)Vue內(nèi)部實(shí)現(xiàn)的響應(yīng)式系統(tǒng)來(lái)完成的。

響應(yīng)式對(duì)象的意義在于使得開(kāi)發(fā)者可以更加方便地管理和操作數(shù)據(jù)。當(dāng)數(shù)據(jù)被轉(zhuǎn)換為響應(yīng)式對(duì)象后，我們可以直接修改對(duì)象的屬性值，而不需要手動(dòng)調(diào)用Vue的更新函數(shù)來(lái)更新視圖。這樣可以極大地提高開(kāi)發(fā)效率，讓開(kāi)發(fā)者更加專(zhuān)注于業(yè)務(wù)邏輯的實(shí)現(xiàn)。

此外，響應(yīng)式對(duì)象還可以與Vue的模板語(yǔ)法、組件等功能無(wú)縫銜接，使得我們可以通過(guò)組合使用響應(yīng)式對(duì)象和Vue的其他功能，快速開(kāi)發(fā)出高效、可維護(hù)的應(yīng)用程序。

在這段代碼中，addForm對(duì)象被使用reactive函數(shù)轉(zhuǎn)換為一個(gè)響應(yīng)式對(duì)象。這意味著當(dāng)addForm對(duì)象的屬性sysPre，diaPre或tem發(fā)生變化時(shí)，相關(guān)的依賴(lài)將會(huì)自動(dòng)更新，如綁定在模板中的表單輸入框等。