vue-动态组件

vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码如下

<component :is="componentTag"></component>

data() {
    return {
        componentTag: '',
    }
},

componentTag为动态加载的不同组件名称，即它可以是组件或者常规的html元素(但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value 这样的 property，若想让其如预期般工作，你需要使用 .prop 修饰器。)。将需要加载的组件名赋值给componentTag，即可在标签出现的位置，渲染该组件。

• 使用场景
  在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：
  
• 拓展- 说道动态组件以及这种tab切换，可能就需要想到tab切换时反复重新渲染导致的性能问题
  tab切换时有时需要保持这些被切换的组件状态，有时希望vue重新创建currentTabComponent
  当我们需要保持被切换到组件状态时，希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个<keep-alive>元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

注意：这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

官方文档：https://v2.cn.vuejs.org/v2/api/#keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。主要用于保留组件状态或避免重新渲染。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。