本文已参与[新人创作礼]活动，一起开启掘金创作之路

本文参考

juejin.cn/post/684490… juejin.cn/post/684490… juejin.cn/post/684490…

一.keep-alive

1. 简介

是一个vue提供的一个抽象组件，主要用于保存组件状态或避免重新渲染，会把其包裹的所有组件都缓存起来

2.步骤

(1).将缓存与不缓存的组件分离

/1/ 设置2个 router-view 出口

<keep-alive>
    <!-- 需要缓存的视图组件 -->
  <router-view v-show="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-show="!$route.meta.keepAlive">
</router-view>

/2/ 在Router里定义好需要缓存的视图组件

new Router({
    routes: [
        {
            path: '/list1',
            name: 'name1',
            component: () => import('路径'),
            meta: {
                deepth: 1
                keepAlive: true //需要被缓存
            }
        },
        ...
        {
            path: '/list2',
            name: 'name2',
            component: () => import('路径'),
            meta: {
                deepth: 2
            }
        },

(2).按需keep-alive

/1/属性

• include：匹配的 路由/组件 会被缓存

• exclude：匹配的 路由/组件 不会被缓存，此时两个相关钩子已失效，与include同时存

在则不缓存

• max：最多可以缓存多少组件实例

• 注意：每个组件都需要添加name属性，可将组件中的name，路由，文件名设置相同名便于使用

/2/监听

 watch: {
    $route(to, from) {
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      //如果 要 form(离开) 的页面是 keepAlive缓存的，
      //再根据 deepth 来判断是前进还是后退
      //如果是后退
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    }
  }

3.钩子

/1/简介

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子：activated与dectivated

/2/activated

//1//执行时机

第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用

/3/deactivated

//1//执行时机

组件被停用(离开路由)时调用。

使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。

这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，你可以放在这个钩子里。

• 不缓存：

  进入的时候可以用created和mounted钩子，离开的时候用beforeDestory和destroyed钩子,beforeDestory可以访问this，destroyed不可以访问this。

• 缓存了组件：

  缓存了组件之后，再次进入组件不会触发beforeCreate、created 、beforeMount、 mounted，如果你想每次进入组件都做一些事情的话，你可以放在activated进入缓存组件的钩子中。

  同理：离开缓存组件的时候，beforeDestroy和destroyed并不会触发，可以使用deactivated离开缓存组件的钩子来代替。

二.vue-page-stack(Vue 单页应用导航管理器)

1.下包

yarn add vue-page-stack

2.使用

import Vue from 'vue' 
import VuePageStack from 'vue-page-stack'; // vue-router是必须的 Vue.use(VuePageStack, { router });

// App.vue 
<template> 
    <div id="app"> 
        <vue-page-stack>
            <router-view ></router-view> 
        </vue-page-stack> 
    </div>
</template>

3.CDN

<script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>

Vue.use(VuePageStack.default, { router });

4.API

/1/注册插件

注册的时候可以指定VuePageStack的名字和keyName(keyName是为了支持浏览器的后退，前进事件，这个特性在webApp,微信公众号和小程序)

Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });

use Vue.use to install vue-page-stack 使用之前需要注册插件

Vue.use(VuePageStack, options); 
// example 
Vue.use(VuePageStack, { router });

如果想在页面前进或者后退的时候添加一些动画，可以通过stack-key-dir进行判断

// App.vue
$route(to, from) {
  if (to.params['stack-key-dir'] === 'DD') {
    this.transitionName = 'DD';
  } else {
    this.transitionName = 'back';
  }
}

了解：另一个缓存包

juejin.cn/editor/draf…