keep-alive

最新推荐文章于 2024-06-10 22:18:41 发布

m0_46156381

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量63

点赞数

文章标签： javascript 前端 vue.js

原文链接：https://blog.csdn.net/agonie201218/article/details/82151457

版权

vue官网的描述：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

keep-alive会缓存不活动的组件，而不是销毁。这样组件之间的切换就能保存上个组件的状态，而不是切换之后又得重新操作。

1.keep-alive的基础使用

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

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

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

不过此种方式并无太大的实用意义。

2.生命周期钩子

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

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

deactivated
在组件被停用时调用。

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

3.配合router-view使用

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

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

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

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

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

4.在2.1.0版本之后

在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>

4.需要注意的地方

先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 componetns 配置中的注册名称。
不会在函数式组件中正常工作，因为它们没有缓存实例。
当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
包含在中，但符合 exclude ，不会调用activated 和 deactivated。
————————————————
版权声明：本文为CSDN博主「Young丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/agonie201218/article/details/82151457