vue中的keep-alive用法总结

今天刚好接到任务，给全局页面添加缓存，目的是跳转新组件后还可以记住上一组件的操作，减少性能消耗

写法
1、全局添加，在 App.vue中添加
<div id="app">
      <keep-alive>
       <router-view />
    </keep-alive>
  </div>

2、使用include 或 exclude判断使用条件。

include= '条件a' (仅为 ’条件 a‘ 的组件添加缓存）

exclude='条件b' (为除了 ’条件 b‘ 的组件添加缓存）
// 1. 将缓存 name 为 条件 a 的组件,如果有多个，可用逗号分
      <keep-alive include='条件 a'>
      <router-view/>
    </keep-alive>
// 2. 将不缓存 name 为 条件 a 的组件
    <keep-alive exclude='条件 a'>
        <router-view/>
    </keep-alive>
// 3. 还可使用属性绑定动态判断
    <keep-alive :include='cachedViews'>
        <router-view/>
    </keep-alive>

computed: {

    cachedViews() {  //cachedViews为经过判断为需要添加缓存的数组

        return this.$store.state.tagsView.cachedViews

}

4、通过为 router的 meta 添加属性，使用 v-if 判断该属性所在的页面

1）在router目录下的index.js中，使用meta:{keepAlive = true },表示需要缓存
 const routes = [
  {

    path:'/home',

    component:Home,

    meta:{

        keepalive:true

    }

  }]
2）在App.vue中进行判断

<div id="app">
    <!--keep-alive 表示页面不会被销毁，即保持页面状态-->
    <keep-alive>
      <router-view v-if="$route.meta.keepalive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive"></router-view>
  </div>
注意：使用中可结合activated和deactivated这两个对应的生命周期。

例如：本次修改中我添加的列表页面缓存，从操作页面回到列表页的时候，需要重新请求接口，拿到新数据，可以使用activated：

activated() {

this.getList();

},

原理可参考这篇文章：Vue内置组件之KeepAlive原理_keepalive vue 原理-CSDN博客