1、什么是keep-alive

keep-alive是Vue提供给我们的一个内置组件，会缓存不活动的组件实例，而不是销毁它们。作为标签使用包裹这需要缓存的组件。

2、作用

在组件切换过程中，把切换出的组件保存在内存中，防止重新渲染DOM，减少加载时间及性能消耗，提高用户体验。避免左慈重复渲染降低性能

举个例子：

这里有两个组件，Home和About，我们使用钩子函数来显示每个组件的创建和销毁

Home.vue

About.vue

App.vue

一开始进入Home组件，组件被创建

切换到About组件时，About组件创建，Home组件销毁

但是，如果我需要Home组件被切换掉以后，不销毁，而是保留之前的状态，那么就可以利用keep-alive来实现

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，避免重新渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

PS：这里Vue3的keep-alive官方进行了修改

原来：

现在：

接着，我们在组件Home中输入123456，然后切换到About组件

会发现，Home并没有被销毁

当我们在切换回Home组件时，Home组件也没有重新创建，并且还保留了字符串

这时候，Home组件其实就被缓存了。但同样的，About组件也被缓存了。

如果我们需要设置某某组件不被缓存，或者某某组件需要被缓存，可以利用keep-alive的两个属性

• include --- 字符串或正则表达式，只有匹配的组件才会被缓存

• exclude --- 字符串或正则表达式，任何匹配的组件都不会被缓存

原写法：

Vue3写法：

注意：这里include里面的值不是 路由里定义的，而是组件里的那个name

这时候，就只有Home组件会被缓存，而About组件不会被缓存了。 exclude同理。

实际中，我们更倾向于利用路由的meta属性来控制：

const routes = [{name: 'home',path: '/home',component: () => import("../View/Home"),meta:{keepAlive: true}},{path: '/about',component: () => import("../View/About"),meta: {keepAlive: false}},
]

keep-alive结合v-if，如果meta中的keepAlive为true则缓存，否则不缓存，这样的话更方便且灵活

这样子，就实现了指定组件的缓存，其他组件不缓存。但是，随之而来的问题就是，Home组件被缓存了，我就不知道什么时候离开和什么进入Home组件了。 这时候就要利用 新增的两个钩子函数 activated和deactived来获取当前组件是否处于活动状态。

• activated --- 在keep-alive组件激活时调用，该钩子在服务器渲染期间不被调用

• deactivated --- 在keep-alive组件停用时调用，该钩子在服务器渲染期间不被调用

只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的

created ---> activate