vue动态组件-keep-alive

keep-alive:动态组件

当我们切换组件时，希望保持这些组件的状态。

当组件在内被切换，这个 `` 要求被切换到的组件都有自己的名字，不论是通过组件的name选项还是局部/全局注册`。

 <!--include可以设置需要缓存的组件名字-->
<keep-alive include='aa'>
     <!-- 失活的组件将会被缓存！下次点击还保持原状态-->
     <component :is='comp'></component>
 </keep-alive>a

一旦组件缓存起来，内部组件就会有两个钩子函数：activated 和 deactivated ，并且只有当外层包裹keep-alive的时候，组件被缓存的时候，才会执行这两个函数

当运行此组件的时候会触发activated函数，停用的时候会触发deactivated

整体代码如下：系统刚运行时会输出 a-activ当点击切换时会输出a-deac，b-activ

<body>
        <div id="app">
            <button @click="type=type==='aa'?'bb':'aa'">点击</button>
            <keep-alive include='aa'>
                <component :is='type'></component>       
            </keep-alive>
        </div>
        <template id="a">
            <div>
               <p>组件A</p>
            </div>
        </template>
        <template id="b">
            <div>
                <p>文本</p>
            </div>
        </template>
        <script src="./base/vue.js"></script>
    </body>
    <script>
        Vue.component("aa",{
            template:"#a",
            activated () {
                console.log("a-activ")
            },
            deactivated () {
                console.log("a-deac")
            }
        })
        Vue.component("bb",{
            template:"#b",
            activated () {
                console.log("b-activ")
            },
            deactivated () {
                console.log("b-deac")
            }
        })
        new Vue({
            el:"#app",
            data:{
                type:"aa",
            }
        })
    </script>

请用今天的努力，让明天没有遗憾。