组件缓存 keep-alive

组件缓存的目的：（一般在项目优化这步骤完成） 

• 防止组件频繁创建和销毁
• 防止网络请求重复无用执行

步骤

组件缓存, 可以实现组件的状态保持。

结合 vue 内置的 keep-alive 组件，可以实现组件的状态保持。

官方文档地址：https://cn.vuejs.org/v2/api/#keep-alive

1. 在App.vue中的router-view外层套上一个keep-alive组件

   • 缓存的一级路由页面切换不被释放, 但是首页还是会重新请求数据（因为首页在二级路由中）

2. 在Layout.vue中的router-view外层套上一个keep-alive组件

   • 这次Home和My页面都被缓存了(二级路由也要管)

3. 但发现搜索页面（一级路由下）和详情页面（一级路由下）多被缓存起来了 (多次进入不同的文章, 发现都是同一个文章详情)

4. 对router-view使用exclude属性来区别, 哪些页面组件可以缓存

   ==特别注意exclude里是组件的name名字(跟路由没什么关系)==

   <template>
     <div id="app">
       <!-- 一级路由窗口 -->
       <keep-alive
         exclude="ArticleIndex,search,UserProfile,favoriteArticle,HistoryAticle,fens"
       >
         <router-view></router-view>
       </keep-alive>
     </div>
   </template>

   当然你也可以在二级路由上设置exclude

<template>
  <div class="layout-container">
    <!-- 二级路由出口 -->
    <keep-alive exclude="my">
      <router-view> </router-view>
    </keep-alive>
  </div>
</template>
<script>

小结

• 只有被切换销毁的组件, 才需要被缓存
• router-view是他们切换时的挂载点, 套在挂载点外来缓存内部组件

 注意点：

组件被缓存，切走了就会失去激活生命周期方法触发 deactivated

  无被缓存，切走了，destroyed摧毁生命周期方法触发