vue中key，keep-alive理解。

Posted 2023-04-29

参考技术A 避免dom元素重复渲染. 我们一般设置一个唯一标识作为key值，id或者index下标。

keep-alive是vue内置的⼀个组件，这个组件的作⽤就是能够缓存不活动的组件，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤keep-alive来实现。

在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化’，此时在router-view上使⽤keep-alive。 keep-alive可以使被包含的路由组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下⼀次显示时，也不会重新渲染。

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max-数字最多可以缓存多少组件。

vue中keepalive怎么理解？?---vue中文社区

vue中keepalive怎么理解？

说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js

什么是keepalive

我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时， 也不会进行重新init

keepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存

基本使用

1. // 被keepalive包含的组件会被进行缓存

2. <keep-alive>

3.    <component />

4. </keep-alive>

上面提到被keepalive包含的组件不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook

• activated 当keepalive包含的组件再次渲染的时候触发

• deactivated 当keepalive包含的组件销毁的时候触发

注: 2.1.0 版本后keepalive包含但被exclude排除的组件不会有以上两个hook

参数

keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存

• include 包含的组件

• exclude 排除的组件

• max 缓存组件的最大值

其中include,exclude可以为字符，数组，以及正则表达式
max 类型为字符或者数字

代码理解

1. // 只缓存组件name为a或者b的组件

2. <keep-alive include="a,b">

3.  <component :is="currentView" />

4. </keep-alive>

5.  

6. // 组件名为c的组件不缓存

7. <keep-alive exclude="c">

8.  <component :is="currentView"/>

9. </keep-alive>

10.  

11. // 如果同时使用include,exclude,那么exclude优先于include， 下面的例子也就是只缓存a组件

12. <keep-alive include="a,b" exclude="b">

13.  <component :is="currentView"/>

14. </keep-alive>

15.  

16. // 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件

17. <keep-alive exclude="c" max="5">

18.  <component :is="currentView"/>

19. </keep-alive>

配合router使用

1. <!-- template -->

2. // 意思就是$router.meta.keepAlive值为真是将组件进行缓存

3. <keep-alive>

4.    <router-view v-if="$router.meta.keepAlive"></router-view>

5. </keep-alive>

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

7.  

8. //router配置

9. new Router({

10.    routes: [

11.        {

12.            name: ‘a‘,

13.            path: ‘/a‘,

14.            component: A,

15.            meta: {

16.                keepAlive: true

17.            }

18.        },

19.        {

20.            name: ‘b‘,

21.            path: ‘/b‘,

22.            component: B

23.        }

24.    ]

25. })

总结

keepalive是一个抽象组件，缓存vnode，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数