快捷導(dǎo)航

Vue數(shù)據(jù)更新視圖未更新的幾種解決方案

更新時(shí)間：2024年02月18日 08:56:15 作者：小蹦跶兒

本文主要介紹在vue項(xiàng)目中,遇到數(shù)據(jù)更新但視圖不更新的情況時(shí),無法使用watch監(jiān)聽、無法使用this.$set方法,同時(shí)使用this.$forceUpdate()無效時(shí),所使用的解決方案,需要的朋友可以參考下

一、問題描述

在Vue項(xiàng)目中，有時(shí)我們會(huì)遇到數(shù)據(jù)更新了，但是視圖沒有更新的情況，這是因?yàn)閂ue使用的是異步更新的方式，如果數(shù)據(jù)變化時(shí)視圖沒有立即響應(yīng)，則一般都會(huì)考慮使用以下幾種解決方案：

方案一：使用watch監(jiān)聽對(duì)象屬性變化

<template>
    <div>
        <h3>{{userInfo.name}}</h3>
        <button @click="changeUserName">點(diǎn)擊我改變用戶名</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            userInfo: {
                name: '張三',
                age: 16
            }
        }
    },
    watch:{
        'userInfo.name': {
            handler(newValue, oldValue) {
              console.log('用戶名變化了，新值：' + newValue + '，舊值：' + oldValue);
            },
            immediate: true,
            deep: true
        }
    },
    methods:{
        changeUserName(){
            // 假設(shè)異步請(qǐng)求修改用戶名
            const newUserName = '李四';
            this.userInfo.name = newUserName;
        }
    }
}
</script>

方案二：使用this.$set()強(qiáng)制更新響應(yīng)式變量

// 定義數(shù)據(jù)對(duì)象：
obj: { name: "小明", age: 18, },       

// 基本語(yǔ)法：
this.$set(需要改變的對(duì)象，"需要改變的對(duì)象屬性"，"新值")

示例如下：

<template>
    <div>
        <h3>{{initList.message}}</h3>
        <button @click="changeMessage">點(diǎn)擊我改變message值</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            initList: {
                message: 'hello'
            },
        }
    },
    methods:{
        changeMessage(){
            // 假設(shè)是異步調(diào)用獲取到了新的message值
            const newMessage='world';
            this.$set(this.initList, 'message', newMessage);
        }
    }
}
</script>

方案三：使用this.$forceUpdate(）強(qiáng)制性重新渲染

methods: {
    // 在某些情況下需要強(qiáng)制重新渲染組件
    forceRerender() {
        // 調(diào)用 $forceUpdate()方法
        this.$forceUpdate();
    }
}

但是，在項(xiàng)目中，如果以上方案均無效，比如由于無法使用watch或this.$set()實(shí)現(xiàn)所需功能，或者使用后會(huì)使代碼變得更復(fù)雜、冗余；同時(shí)層級(jí)太多或其他原因?qū)е?code>this.$forceUpdate(）也不起作用，那么還有什么方案可以解決視圖不更新的問題呢？

二、解決方案

為確保視圖更新，可以先將數(shù)據(jù)賦值后再清空，最后在this.$nextTick()中處理數(shù)據(jù)，并重新賦值。代碼示例如下：

// 為確保視圖更新，先將數(shù)據(jù)重新賦值給一個(gè)變量，然后再清空
const details = this.detailsList;
this.detailsList = [];

// 處理數(shù)據(jù)，并重新賦值
this.$nextTick(() => {
    // 處理數(shù)據(jù)
    const detailsList = this.formatList(details, data.playCourseChapterId);
    // 重新賦值
    this.detailsList = Object.assign([], detailsList);
})

這時(shí)，數(shù)據(jù)更新的同時(shí)，視圖也會(huì)同步更新。