2021-12-25 面试题:vue(二) v-for使用key的原因,组件渲染更新过程,MVVM的理解,组件和封装组件的意义,ajax放在哪个生命周期,$nextTick作用,vue常见性能优化方式

原创已于 2022-11-03 11:03:54 修改 · 421 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

面试

于 2021-12-25 23:16:42 首次发布

本文探讨了Vue.js中v-for使用key的原因，组件渲染和更新的流程，MVVM的概念，组件化的重要性，ajax请求的最佳时机，$nextTick的作用，以及一系列Vue性能优化策略，包括v-if/v-show的使用，计算属性，v-for的key，事件处理，异步组件，keep-alive，数据结构优化等。

文章目录

1.为什么v-for要使用key?

快速查找到节点,减少渲染次数,提高渲染性能

2.描述组件渲染和更新的过程

vue组件初次渲染过程:

解析模板为render函数,
监听data属性的getter和setter,
执行render函数,生成vnode,patch(ele,vnode):

vue组件更新过程:

修改data,触发setter(此前在getter中已被更新),
重新执行render函数,生成newVnode,patch(ele,newVnode)

3.对MVVM的理解

M:Model,V:View,VM:ViewModel,
Vue中的DOM通过监听事件,操作Vue中的data,
Vue中的data通过指令操作DOM,
这就是所说的数据驱动视图

4.什么是组件?为什么要封装组件?

组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。
页面上可以复用的都可以成为组件,它是html,css,js的聚合体,
封装组件的目的主要是为了解耦,提高代码的复用率

5.ajax请求应该放在哪个生命周期里?

ajax放在mounted中,因为js是单线程而ajax是异步操作

6.vue为何是异步渲染，$nextTick何用？

因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，
因此Vue会在本轮数据更新之后，再去异步更新视图

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，
在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
一般在mounted中使用$nextTick

7.vue常见性能优化方式？

1.合理使用v-if和v-show，
2.合理使用computed，
3.v-for加key，
4.自定义事件，dom事件及时销毁，
5.合理使用异步组件，
6.合理使用keepalive，
7.data层级不要太深，
8.使用vue-loader在开发环境做模板编译，
9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），
10.使用ssr