防坑提效小课堂：使用Vue动态组件的必知必会！

基础用法

<!-- 失活的组件将会被销毁，激活的组件会重新创建实例-->  
<component v-bind:is="currentTabComponent"></component>

当不使用<keep-alive>组件时，Vue 在切换动态组件时会销毁旧组件实例然后创建新的组件实例。这意味着每次切换组件时，都会执行组件的销毁钩子（如beforeDestroy和destroyed），并创建新组件实例，从而重新执行创建钩子（如beforeCreate和created）。

这种行为确保了组件的状态和数据不会互相影响，同时也允许你在组件切换时重新初始化数据和状态。然而，这也会带来一些性能开销，特别是如果你频繁切换组件或组件的初始化成本较高时。

如果你希望在切换组件时避免销毁和重新创建实例，可以考虑使用<keep-alive>组件来缓存已经创建的组件实例。<keep-alive> 允许你将组件的状态和实例保留在内存中，以便它们可以被重用，而不必每次都重新创建。

缓存 - < keep-alive >

<!-- 失活的组件将会被缓存！-->  
<!-- 当你切换回之前已经渲染过的组件时，Vue 会直接从缓存中取出组件实例，而不必重新创建，从而提高性能。-->
<keep-alive>  
<component v-bind:is="currentTabComponent"></component>  
</keep-alive>

当使用 <keep-alive> 缓存组件实例时，它们具有以下特性：

1. 保留状态和数据: 缓存的组件实例保留了其状态和数据，包括用户输入、计算属性的结果、组件的内部状态等。这意味着当你切换回缓存的组件时，它们会保持与之前一样的状态，而不需要重新初始化。
2. 组件的生命周期钩子（重点）: 缓存的组件实例不会触发 created 和 beforeCreate 钩子，因为它们在首次创建组件时触发。当从缓存中取出组件实例时，Vue 会触发 activated 钩子，用于通知组件被重新激活。类似地，当组件离开缓存时，Vue 会触发 deactivated 钩子。

export default {
activated() {
// 在组件被激活时执行逻辑 
}, 
deactivated() {
// 在组件被缓存前执行清理操作 
},
// ... 
};

3. 事件监听器: 缓存的组件实例的事件监听器仍然有效，它们不会被销毁。这意味着当你切换回缓存的组件时，之前设置的事件监听器仍然可以正常工作。
4. DOM 状态: 缓存的组件的 DOM 状态也得以保留。这包括输入框中的文本内容、滚动位置等。这有助于提供无缝的用户体验，因为用户在切换组件时不会丢失他们的输入或滚动位置。
5. 性能优势: 使用缓存的组件实例能够避免不必要的组件销毁和重新创建，从而提高性能。这在组件切换频繁的情况下特别有帮助，因为它减少了初始化成本和不必要的工作。
6. 缓存策略（重点）： 你可以在<keep-alive>标签中使用 include 和 exclude 属性来指定哪些组件应该被缓存或排除在缓存之外。这允许你对不同的组件应用不同的缓存策略。

<keep-alive :include="['ComponentA']">
  <component :is="currentComponent"></component>
</keep-alive>

相关文档

// Vue官方文档相关目录（学会看文档很重要）
https://v2.cn.vuejs.org/v2/api/#keep-alive
https://v2.cn.vuejs.org/v2/api/#component
https://v2.cn.vuejs.org/v2/guide/components-dynamic-async.html
https://v2.cn.vuejs.org/v2/guide/components.html
// 其他
// ...