快捷導(dǎo)航

Vue異步請(qǐng)求導(dǎo)致頁(yè)面數(shù)據(jù)渲染錯(cuò)誤問(wèn)題解決方法示例

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

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

一、場(chǎng)景描述

在Vue項(xiàng)目?jī)?yōu)化過(guò)程中，頁(yè)面部分通過(guò)JS調(diào)用promise返回的異步數(shù)據(jù)，導(dǎo)致頁(yè)面部分始終無(wú)法加載后臺(tái)返回的數(shù)據(jù)。通過(guò)觸發(fā)其他DOM操作（例如折疊欄位的操作），后臺(tái)數(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>

二、問(wèn)題分析

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

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

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

三、解決措施

通過(guò)以上問(wèn)題分析，可通過(guò)v-if控制頁(yè)面渲染、銷毀邏輯，在異步方法請(qǐng)求前銷毀相應(yīng)數(shù)據(jù)，異步方法請(qǐng)求成功后新建相應(yīng)數(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)過(guò)實(shí)踐發(fā)現(xiàn)，另一種解決方式可應(yīng)用this.$set()實(shí)現(xiàn)。

拓展閱讀

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

《Vue進(jìn)階給對(duì)象動(dòng)態(tài)添加屬性和值》

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

您可能感興趣的文章: