2024年keep-alive Vue-动态组件怎么使用(3)，2024年最新46道面试题带你了解高级Web前端面试

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

****我会以keepAlive的概念、使用keepAlive新增的钩子，使用场景，优点、****缓存的方式有几种、引出的其他问题来串联keepAlive这个问题

概念：

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。

新增钩子：

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价失活(离开)时调用）

使用场景：

例如有一个商品页面和一个详情页面，这样在两个页面切换的时候就可以用到keep-alive,在切换到详情的时候，把状态保留在内存中，而不是销毁,从而提高一个性能的优化，

优点：

优点是在组件切换过程中，把切换出去的组件保留在内存中，防止重复渲染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’”>显示组件二