2024年前端最新keep-alive Vue-动态组件怎么使用(1)，2024年最新2024Web前端大厂面试题来袭

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

优点：

优点是在组件切换过程中，把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性，

缓存的方式有几种：

如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可。

如果缓存部分页面******，第一种是使用使用新增属性include/exclude,缓存部分页面********，首先在data中定义，isKeep：[‘组件1’，‘组件2’]，在keepAlive上用：:include********=“iskeep”********，**注意一定要在路由和被缓存的组件加上name否则缓存会失效

第二种是结合Router，router/index.js中通过设置路由元信息，指定属性缓存属性值为true，不缓存属性值为fasle，在app.vue中用keepAlive包裹要缓存的router****-view，通过$router.meta.设置的路由原信息属性值获取，在keepAlive外在用v-if取反判断，v-if和v-else不是配套使用吗？为什么不使用v-else，v-if和v-else之间要挨着使用不然会报错！****

V-if和v-show区别问题引出回流和重绘：

相同点都是动态控制元素的显示和隐藏

不同处v-if是动态的操作ui结构，比如新增元素、删除元素，而v-show是利用样式display：的值是不是none控制，适应场景，频繁的显示隐藏使用v-show，筛选和初始值用v-if，初始值是从头开始渲染一个元素，所以v-if更适合初始值

v-show触发了浏览器的重绘，v-if触发了浏览器的回流，

重绘：重绘是重新绘制页面外观，例如修改颜色属性

回流：回流是重新构建页面结构，例如新增标签 、删除标签等

外观改变不一定会重新构建页面结构，也就是我们常说的`重绘不一定回流`，

你把一个问题答道这种程度，在面试官眼中你就是 

这个

<button @click=“com = ‘com1’”>显示组件一

<button @click=“com = ‘com2’”>显示组件二