keep-alive详解和onactived，ondeactived详解

keep-alive可以将本该被摧毁的组件缓存起来，使此组件虽然从dom树上被移除，但仍被缓存在组件树上，随时等待被重新插入dom树，基本用法如下

keep-alive中只能存在一个组件，想要多个组件被缓存，只能使用多个keep-alive包裹，但类似于动态组件的方式出来，如果只用一个组件位置可以渲染多个组件，那么多个组件都将被缓存

以此方式包裹动态组件，只要是Component保存的组件实例中被渲染过的，都可以缓存在组件树上不被销毁

如果我们只需要在Component中的某些组件实例不被销毁，那么我们则需要keep-alive上的一个include属性

 

 只要组件名(也就是组件的name属性)在include中，它就能被缓存，不被销毁，反之则不能。include里我们既可以定义几个字符串用逗号连接（不可以存在空格），也可以传入字符串的数组

vue3给组件定义组件名也有一些复杂，详情可以看我的另一篇文章vue3组合式api中 组件的命名方法详解

以上是keep-alive的基本使用

keep-alive包裹的组件不会被销毁，所以这种不会被销毁的组件又多了两种生命周期的状态，分别是onActived 和 onDeactived，其中onactived在组件被插入dom树中时调用，ondeactived在组件被dom树移除时被调用，在这里我们一定要分清两个概念，那就是挂载和插入dom树两者有本质区别，比如说在爷组件（父组件的父组件）用keep-alive包裹父组件，并给父组件写入v-if=“flase”在这种状态下，由于v-if的性质，父组件不会出现在dom树上，但由于keep-alive的性质，父组件又会缓存在组件树，所以子组件会跟着父组件脱离dom树，也就会触发ondeactive，但它却能正常触发onmounted挂载的生命周期

keep-alive和v-if一起可以用于一些特殊场景，但情况较少，且不一定不是最好的办法，如果你对此概念比较模糊，那更应该避免两者出现在同一位置，如果对于上面那段话说的东西不理解，那就要记住，不让两者同时出现，然后记住onactived和ondeactived两个函数就是在进入组件和离开组件时触发