vue页面刷新与缓存

在vue项目中，有些组件没必要多次渲染，我们需要组件在内存中缓存下来。此时keep-alive就可以派上用场了，keep-alive可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。

---

PS：keep-alive 与 transition相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。

1.keep-alive的基础使用

最基础的一般是结合动态组件去使用：

<keep-alive>
    <component :is="currentView"></component>
</keep-alive>

new Vue({
    el: '#app',
    data(){
        return {
            currentView: Test //Test为引入的子组件
        }
    }
})

2.生命周期钩子

被包含在 <keep-alive> 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

• activated

在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

• deactivated

在组件被停用时调用。

注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

3.配合router-view使用

有些时候可能需要将整个路由页面一切缓存下来，也就是将 router-view 进行缓存。这种使用场景还是蛮多的。

在vue 2.1.0 之前，大部分是这样实现的：

<keep-alive>
    <router-view v-if="$router.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$router.meta.keepAlive"></router-view>

new Router({
    routes: [
        {
            name: 'a',
            path: '/a',
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: 'b',
            path: '/b',
            component: B
        }
    ]
})

这样配置路由的路由元信息之后，a路由的 $router.meta.keepAlive 便为 true ，而b路由则为 false 。
所以为 true 的将被包裹在 keep-alive 中，为 false 的则在外层。这样a路由便达到了被缓存的效果，如果还有想要缓存的路由，只需要在路由元中加入 keepAlive: true 即可。

4.在2.1.0版本之后配合router-view使用

在vue 2.1.0 版本之后，keep-alive 新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存，优先级大于include) 。

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时，一定要使用 v-bind !

<!-- 逗号分隔字符串，只有组件a与b被缓存。这样使用场景变得更有意义了 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

有了include之后，再与 router-view 一起使用时便方便许多了：

<!-- 一个include解决了，不需要多写一个标签，也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
    <router-view></router-view>
</keep-alive>

4.需要注意的地方

1. keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 componetns 配置中的注册名称。对于router-view来说，则是匹配路由器注册时的name与路由对应组件的name值。
2. keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3. 当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
4. 包含在 keep-alive 中，但符合 exclude ，不会调用activated 和 deactivated。

5.router-view的强制刷新

使用keep-alive有一个后遗症，就是如果进入同一个路由带动态参数或者查询参数改变的话，页面会一直使用最开始缓存的页面，页面不会再进行刷新请求参数。利用watch来监控$route是一个方法，但也不是特别好用，因为如果只是查询参数改变的话是不会触发改变的。

different router the same component vue。真实的业务场景中，这种情况很多。

创建和编辑的页面使用的是同一个component，默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

<router-view :key="key"></router-view>

<script>
export default {
  computed: {
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + +new Date()
        : this.$route + +new Date();
    }
  }
};
</script>

参考资料:

keep-alive的深入理解与使用(配合router-view缓存整个路由页面)

手摸手，带你用vue撸后台 系列二(登录权限篇)

转载于:https://www.cnblogs.com/pengzhixin/p/7760076.html