keep-alive 的详细介绍

1.keep-alive 了解

         keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 。

2.keep-alive的运用

如图所示:给你的视图标签外套一个keep-alive标签就实现了组件的缓存

3. keep-alive的include和exclude属性

        上图中是所有组件都实现缓存，那么我们要实现指定组件缓存就需要用到include和exclude这两个属性了

 

如图所示 include所绑定的Home组件就实现缓存了 其他的组件就没实现缓存  而Home对应的是Home组件中的name名字

 

而exclude属性与include的功能恰恰相反  exclude绑定的组件中name名不实现缓存，没绑定的实现缓存

3.keep-alive的activated和deactivated生命周期

        keep-alive实现组件缓存的时候该组件的生命周期函数就会失效，那么我们写在生命周期中的操作就会失效，那么我们的这些操作可以写在keep-alive特定的生命周期中。

        下面是对这两个生命周期的简单介绍

当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

总结： keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 。提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。