Vue动态组件

当需要在两个组件间来回切换时，可以用动态组件来代替在组件上频繁使用v-if或v-show，提升性能。

动态组件是通过 Vue 的 <component> 元素和特殊的 is 属性实现的：

<template>
  <div>
    <button @click="setSelectedCom('child-one')">组件一</button>
    <button @click="setSelectedCom('child-two')">组件二</button>
    <!-- <child-one v-if="selectedComponent === 'child-one'"></child-one>
    	 <child-two v-if="selectedComponent === 'child-two'"></child-two> -->
    <component :is="selectedComponent"></component>
  </div>
</template>
<script>
export default {
    data() {
        return {
            selectedComponent: 'child-one'
        }
    },
    methods: {
        setSelectedCom(cmp) {
            this.selectedComponent = cmp;
        }
    }
}
</script>

is的值可以是：

• 被注册的组件名；
• 导入的组件对象；

注意：当我们使用动态组件进行组件内切换时，被切换掉的组件会被卸载（摧毁）！（比如被切换的组件内有一个输入框，当我们输入数据后不保存进行切换，然后再切回来，这时候之前输入的东西就会消失）这个时候可以使用<keep-alive>。

keep-alive

Vue的内置组件，它可以让<component>组件进行切换时不完全卸载组件，保留它的状态以便切换回来的时候还能在屏幕上渲染出之前的数据。

<template>
  <div>
    <button @click="setSelectedCom('child-one')">组件一</button>
    <button @click="setSelectedCom('child-two')">组件二</button>
    <keep-alive>
        <component :is="selectedComponent"></component>
    </keep-alive>
  </div>
</template>
<script>
export default {
    data() {
        return {
            selectedComponent: 'child-one'
        }
    },
    methods: {
        setSelectedCom(cmp) {
            this.selectedComponent = cmp;
        }
    }
}
</script>

KeepAlive（缓存组件实例）的生命周期

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

activated

在首次组件挂载时以及每次从缓存中被重新插入的时候调用。

export default {
    activated() {}
}

deactivated

在组件卸载和从DOM上移除进入缓存时调用。

export default {
    deactivated() {}
}