Vue進(jìn)階（幺捌陸）：異步請求導(dǎo)致頁面數(shù)據(jù)渲染錯誤問題解決措施

場景描述

在Vue項(xiàng)目優(yōu)化過程中，頁面部分應(yīng)用JS調(diào)用promise返回的異步數(shù)據(jù)，導(dǎo)致頁面部分始終無法加載后臺返回的數(shù)據(jù)值。通過觸發(fā)其他DOM操作（例如折疊欄位的操作），后臺數(shù)據(jù)可以正常渲染展示。處理邏輯大致如下：

問題分析

經(jīng)過頁面數(shù)據(jù)輸出及debugger斷點(diǎn)調(diào)試，發(fā)現(xiàn)在頁面渲染結(jié)束前，異步數(shù)據(jù)并未處理完畢，導(dǎo)致頁面數(shù)據(jù)渲染問題。

當(dāng)vue實(shí)例生成后，再次給對象賦值時，并不會自動更新到視圖上去； 當(dāng)我們?nèi)タ磛ue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會觸發(fā)視圖更新。

受 ES5 限制，Vue.js 不能檢測到對象屬性的添加或刪除，即Vue未做到臟數(shù)據(jù)檢查。因?yàn)?Vue.js 在初始化實(shí)例時將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。

解決措施

通過以上問題分析，可通過v-if控制頁面渲染、銷毀邏輯，在異步方法請求前銷毀相應(yīng)數(shù)據(jù)段，異步方法請求成功后新建相應(yīng)數(shù)據(jù)段。

代碼如下：

Vue 渲染

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。