Vue进阶（幺捌陆）：异步请求导致页面数据渲染错误问题解决措施

场景描述

在Vue项目优化过程中，页面部分应用JS调用promise返回的异步数据，导致页面部分始终无法加载后台返回的数据值。通过触发其他DOM操作（例如折叠栏位的操作），后台数据可以正常渲染展示。处理逻辑大致如下：

<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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

问题分析

经过页面数据输出及debugger断点调试，发现在页面渲染结束前，异步数据并未处理完毕，导致页面数据渲染问题。

当vue实例生成后，再次给对象赋值时，并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

受 ES5 限制，Vue.js 不能检测到对象属性的添加或删除，即Vue未做到脏数据检查。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

解决措施

通过以上问题分析，可通过v-if控制页面渲染、销毁逻辑，在异步方法请求前销毁相应数据段，异步方法请求成功后新建相应数据段。
代码如下：

<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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
 

拓展阅读

• 《Vue进阶（九十八）：Vue.set()和this.$set()介绍》
• 《Vue进阶（九十七）：vue给对象动态添加属性和值》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/115396357