vue.js中created()与activated()的个人使用解读

<template>
<div class="app">
    我是组件A
</div>
</template>

<script>
    export default{
        name: "compA",
        data(){
            return {
            }
        },
        created(){
            console.log('created');
        },
        activated(){
            console.log('activated');
        },
        deactivated(){
            console.log('deactivated');
        }
    }
</script>

<template>
<div class="app">
    <div class="bth">
        <button @click="currentComponent='compA'">A</button>
        <button @click="currentComponent='compB'">B</button>    
    </div>
</div>
<keep-alive>
    <component :is="currentComponent"></component>
</keep-alive>
</template>

<script>
    import compA from './component/compA'
    import compB from './component/compB'
    export default{
        name: "App",
        component: {
            compA, compB
        },
        data(){
            return {
                currentComponent: 'compA'
            }
        }
    }
</script>