总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包
一、场景描述
在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>
二、问题分析
经过页面数据输出及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 {
### React
* 介绍一下react
* React单项数据流
* react生命周期函数和react组件的生命周期
* react和Vue的原理,区别,亮点,作用
* reactJs的组件交流
* 有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
* 项目里用到了react,为什么要选择react,react有哪些好处
* 怎么获取真正的dom
* 选择react的原因
* react的生命周期函数
* setState之后的流程
* react高阶组件知道吗?
* React的jsx,函数式编程
* react的组件是通过什么去判断是否刷新的
* 如何配置React-Router
* 路由的动态加载模块
* Redux中间件是什么东西,接受几个参数
* redux请求中间件如何处理并发
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)