Vue異步請求導致頁面數(shù)據(jù)渲染錯誤問題解決方法示例

更新時間：2023年09月25日 09:16:10 作者：SHQ5785

這篇文章主要為大家介紹了Vue中異步請求導致頁面數(shù)據(jù)渲染錯誤問題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

一、場景描述

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

處理邏輯大致如下：

<template>
	<div v-for="(items, index) in results" :key="items.itemsID">
		<span v-for="(item, index) in items.appendItems" :key="item.itemID">
			<el-button type="text" @click="handlerClick(item)">
				{{item.itemName}}
			</el-button>
		</span>
	</div>
</template>
<script>
	results.foreach((result, index, results) => {
		results[index].appendItems = []
		aysnMethods(inputParams).then(res => {
			results[index].appendItems = res.returnResults
		})
	})
</script>

二、問題分析

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

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

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

三、解決措施

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

<template>
	<div v-if="showForm">
		<div v-for="(items, index) in results" :key="items.itemsID">
			<span v-for="(item, index) in items.appendItems" :key="item.itemID">
				<el-button type="text" @click="handlerClick(item)">
					{{item.itemName}}
				</el-button>
			</span>
		</div>
	</div>
</template>
<script>
	data(): {
		return {
			showForm: false
		}
	}
	results.foreach((result, index, results) => {
		results[index].appendItems = []
		vm.showForm = false
		aysnMethods(inputParams).then(res => {
			results[index].appendItems = res.returnResults
			vm.showForm = false
		})
	})
</script>

后經(jīng)過實踐發(fā)現(xiàn)，另一種解決方式可應用this.$set()實現(xiàn)。

拓展閱讀

《Vue進階Vue.set()和this.$set()介紹》

《Vue進階給對象動態(tài)添加屬性和值》

以上就是Vue異步請求導致頁面數(shù)據(jù)渲染錯誤問題解決方法示例的詳細內(nèi)容，更多關于Vue異步請求頁面渲染錯誤的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: