一、场景描述
在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(i
**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**
tem)">
{{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>
二、问题分析
经过页面数据输出及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 = []
#### 总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)