详解vue中的动态组件component和keep-alive

<component is="组件名称"></component>

<keep-alive>
     <component is="组件名称"></component>
</keep-alive>

<keep-alive include="组件名称，多个组件之间用英文的逗号分隔">
     <component is="组件名称"></component>
</keep-alive>

<keep-alive exclude="组件名称，多个组件之间用英文的逗号分隔">
     <component is="组件名称"></component>
</keep-alive>

<template>
    <div>
        <el-button-group>
            <el-button @click="componentName='DynamicA'">DynamicA</el-button>
            <el-button @click="componentName='DynamicB'">DynamicB</el-button>
        </el-button-group>
        <!-- 
            被传给 :is 的值是被注册的组件名
        -->
        <component :is="componentName"></component>
    </div>
</template>
<script>
import DynamicA from './DynamicA.vue';
import DynamicB from './DynamicB.vue';
export default {
    name: '',
    components: {
        DynamicA,
        DynamicB,
    },
    data() {
        return {
            componentName: ''
        }
    }
}
</script>
<style>
</style>

<template>
    <div class="dynamicA">
        DynamicA
        <div>
            <el-button @click="count+=1">count+1</el-button>
            <!-- count的值在切换的过程中，并没有得到保存 -->
            count: {{ count }}
        </div>
    </div>
</template>
<script>
export default {
    name: 'DynamicA',
    components: {
    },
    data() {
        return {
            count: 0
        }
    },
    // 每次当组件被切换到时，此方法被调用了，说明当前组件实例又被重新创建了
    created() {
        console.log('DynamicA created');
    },
    // 每次当组件切换走时，此方法被调用了，说明当前组件实例已被销毁
    destroyed() {
        console.log('DynamicA destroyed');
    }
}
</script>
<style>
.dynamicA {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

<template>
    <div class="dynamicB">
        DynamicB
        <el-input v-model="inputVal"></el-input>
    </div>
</template>
<script>
export default {
    name: 'DynamicB',
    components: {
    },
    data() {
        return {
            inputVal:''
        }
    },
    // 每次当组件被切换到时，此方法被调用了，说明当前组件实例又被重新创建了
    created() {
        console.log('DynamicA created');
    },
    // 每次当组件切换走时，此方法被调用了，说明当前组件实例已被销毁
    destroyed() {
        console.log('DynamicA destroyed');
    }
}
</script>
<style>
.dynamicB {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

<template>
    <div>
        <el-button-group>
            <el-button @click="componentName='DynamicA'">DynamicA</el-button>
            <el-button @click="componentName='DynamicB'">DynamicB</el-button>
        </el-button-group>
        <!-- 
            1. 被传给 :is 的值是被注册的组件名
            2. <KeepAlive> 默认会缓存内部的所有组件实例，
               但我们可以通过 include 和 exclude prop 来定制该行为。
               这两个 prop 的值都可以是一个以英文逗号分隔的字符串、
               一个正则表达式，或是包含这两种类型的一个数组
            3. 使用keepAlive后，组件切换时，并不会销毁被切走的组件，
               只是它处于不活跃状态，当再次切换到它时，它又变成了活跃状态。
               在使用了KeepAlive后，可以给组件注册activated和deactiveted声明周期钩子函数
        -->
        <keep-alive :include="['DynamicA','DynamicB']">
            <component :is="componentName"></component>
        </keep-alive>
    </div>
</template>
<script>
import DynamicA from './DynamicA.vue';
import DynamicB from './DynamicB.vue';
export default {
    name: '',
    components: {
        DynamicA,
        DynamicB,
    },
    data() {
        return {
            componentName: ''
        }
    },
}
</script>
<style>
</style>

<template>
    <div class="dynamicA">
        DynamicA
        <div>
            <el-button @click="count+=1">count+1</el-button>
            count: {{ count }}
        </div>
    </div>
</template>
<script>
export default {
    name: 'DynamicA',
    components: {
    },
    data() {
        return {
            count: 0
        }
    },
    // 只有第一次创建该组件时，才会调用，然后被缓存下来了。后面切换的过程，都不会调用此钩子
    created() {
        console.log('DynamicA created');
    },
    destroyed() {
        console.log('DynamicA destroyed');
    },
    activated() {
        // 在首次挂载、
        // 以及每次从缓存中被重新插入的时候调用
        console.log('DynamicA activated');
    },
    deactivated() {
        // 在从 DOM 上移除、进入缓存
        // 以及组件卸载时调用
        console.log('DynamicA deactivated');
    }
}
</script>
<style>
.dynamicA {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

<template>
    <div class="dynamicB">
        DynamicB
        <el-input v-model="inputVal"></el-input>
    </div>
</template>
<script>
export default {
    name: 'DynamicB',
    components: {
    },
    data() {
        return {
            inputVal:''
        }
    },
    // 只有第一次创建该组件时，才会调用，然后被缓存下来了。后面切换的过程，都不会调用此钩子
    created() {
        console.log('DynamicB created');
    },
    destroyed() {
        console.log('DynamicB destroyed');
    },
    activated() {
        // 在首次挂载、
        // 以及每次从缓存中被重新插入的时候调用
        console.log('DynamicB activated');
    },
    deactivated() {
        // 在从 DOM 上移除、进入缓存
        // 以及组件卸载时调用
        console.log('DynamicB deactivated');
    }
}
</script>
<style>
.dynamicB {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>