keep-alive:动态组件
当我们切换组件时，希望保持这些组件的状态。
当组件在
<!--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>