解決vue更新默認值時出現的閃屏問題

　　在Vue項目中，對於一個展示用戶個人信息的頁面。有以下需求，需要判斷用戶個人信息是否填充過，如果填充過，需要在頁面中展示已填充項（未填充項不展示）；如果未填充過，需要在頁面中顯示另外一種元素（提示用“去完善”個人信息）。

　　這時候，我們在頁面中有如下元素：

<div v-if="userExist">
    // 這里展示用戶已填充的信息內容
</div>
<div v-else>
    <img class="user-pic-tip" src="../../images/no_info.png"/>
    <div class="user-info-tip">
        <span>暫無基本資料數據</span>
        <router-link to="/editUser">
            <span class="data-link-to">去完善</span>
        </router-link>
    </div>
</div>

　　data中userExist有默認值——false：

export default {
    name: "healthData",
    data() {
        return {
            userExist: false, // 標記用戶是否已填充個人信息
        }
     };
},

　　而用戶到底有沒有填充過個人信息是需要在mounted中通過接口從后端獲取數據才可以知道，這里如果是填充過，后端會返回狀態碼200；如果沒有填充過，后端會返回狀態碼201。

axios.get('/userInfo').then(res => {
    if (res.data.data && res.data.status == 200) {
        this.userExist = true
        // 這里填充對所返回用戶數據的解析
    }
}  

　　在上面這種代碼情況下，因為userExist默認值為false，所以默認需要展示無數據的頁面元素。又因為userExist值得變更需要通過axios請求的方式獲取，就會有延時問題，即產生頁面閃爍的情況。

　　

解決方式：

　　這種問題我們就可以通過如下方式解決，因為無數據是頁面中的元素較少，我們可以跟它們中的圖片路徑、文字等內容的初始值設置為空，請求結束時再為其重新賦值。

　　頁面元素部分：

<div v-if="userExist">
    // 這里展示用戶已填充的信息內容
</div>
<div v-else>
    <img class="user-pic-tip" :src="noDataTip.imgSrc"/>
    <div class="user-info-tip">
        <span>{{noDataTip.tipInfo}}</span>
        <router-link to="/editUser">
            <span class="data-link-to">{{noDataTip.jumpEditUser}}</span>
        </router-link>
    </div>
</div>

　　在data中進行聲明：

export default {
    name: "healthData",
    data() {
        return {
            userExist: false, // 標記用戶是否已填充個人信息
            noDataTip: { // 用戶未填寫個人信息時要顯示的頁面元素的填充內容
                imgSrc: '',
                tipInfo: '',
                jumpInfo: ''
            }
        }
     };
},    

　　重新賦值的過程：

axios.get('/userInfo').then(res => {
    if (res.data.status == 10001) {
        return context.noDataTip = {
            imgSrc:  require('../../images/no_data.png'),
            tipInfo: '暫無基本資料數據',
            jumpInfo: '去完善'
        }
    }
    if (res.data.data && res.data.status == 200) {
        this.userExist = true
        // 這里填充對所返回用戶數據的解析
    }
}  

　　通過這種方式，用戶就不會看到閃爍的情況了。但是，上面這種方式有一個值得注意的地方，img標簽的src屬性如果想要通過屬性綁定的方式給其動態賦值，有兩種處理方式：1.通過上面代碼中的 require('') 方式；2.通過書寫絕對路徑的方式。

 

　　屬性綁定相關內容可以查看這篇文章：https://www.cnblogs.com/belongs-to-qinghua/p/10939900.html