【Vue】面经基础版-缓存组件

一、根本用法

题目
从面经列表 点到 详情页，又点返回，数据重新加载了 → 希望回到原来的位置

原因
当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy和destroyed生命周期钩子），重新返回后组件又被重新创建了（会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子），所以数据被加载了
解决方案
使用 keep-alive 把原来的组件给缓存下来
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不运动的组件实例，而不是销毁它们。
keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。
长处：
在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，
淘汰加载时间及性能消耗，进步用户体验性。
App.vue

1. <template>
2.   <div class="h5-wrapper">
3.     <!--
4.                 包裹了keep-alive 一级路由匹配的组件都会被缓存
5.                 Layout组件 Detail组件，都会被缓存
6.         -->
7.     <keep-alive>
8.       <router-view></router-view>
9.     </keep-alive>
10.   </div>
11. </template>

复制代码

题目：
缓存了全部被切换的组件

---

二、keep-alive的三个属性

① include ： 组件名数组，只有匹配的组件会被缓存
② exclude ： 组件名数组，任何匹配的组件都不会被缓存
   一样平常使用include，exclude大概会导致性能题目，由于组件大概太多了，将来页面就卡死了，所以一样平常会配合max使用
  ③ max ： 最多可以缓存多少组件实例

1. export default {
2.   // 这个才是组件名
3.   name: "LayoutPage",
4. };

复制代码

App.vue

1. <template>
2.   <div class="h5-wrapper">
3.     <keep-alive :include="[keepArr]">
4.       <router-view></router-view>
5.     </keep-alive>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   name: "h5-wrapper",
12.   data () {
13.     return {
14.       keepArr: ['LayoutPage']
15.     }
16.   }
17. };
18. </script>

复制代码

---

三、额外的两个生命周期钩子

keep-alive的使用组件会触发两个生命周期函数
activated 当组件被激活（使用）的时间触发 → 进入这个页面的时间触发
deactivated 当组件不被使用的时间触发 → 脱离这个页面的时间触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
   但是组件第一次被触发的时间照旧会执行的
  所以其提供了actived 和deactived钩子，帮我们实现业务需求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。