<template>
<div>
<button @click="click1()">改变子组件变量</button>
<button @click="click2()">销毁/创建子组件</button>
<button @click="click3()">销毁/创建缓存子组件</button>
<!-- 这里v-if改变时会销毁/创建组件，如果用v-show则只是隐藏/显示。所以v-show并不会让组件调用beforeUnmount和unmounted方法。 -->
<!-- 并且这里如果我们改变了子组件的变量，如果使用v-if再次显示子组件时变量值会变为初始，v-show则会保持改变后变量的值。因为v-show并不会重新初始化组件 -->
<HelloWorld ref="childOne" v-if="isExist">
</HelloWorld>
<!-- 如果将组件用keep-alive标签包括，表示将组件进行缓存。
缓存的组件用v-if的时候不会销毁/创建子组件，而是隐藏/激活缓存，所以不会调用销毁的声明周期函数，会调用activated/deactivated声明周期函数
并且缓存中的v-if和v-show一样会保留组件中变量的值，不会重新初始化 -->
<keep-alive>
<HelloWorld ref="childTwo" v-if="isShowCaheComponent">
</HelloWorld>
</keep-alive>
</div>
</template>
<script>
import HelloWorld from ‘./component/HelloWorld‘
export default {
name:"App",
data:function(){
return {
isExist:true,
isShowCaheComponent:true
};
},
components:{
HelloWorld
},
computed:{
},
methods:{
click1(){//改变子组件中的变量，会触发更新前和更新完成周期函数
this.$refs.childOne.count = this.$refs.childOne.count+1;
this.$refs.childTwo.count = this.$refs.childTwo.count+1;
},
click2(){//销毁或者创建组件，会调用销毁即创建的前面的周期函数
this.isExist = !this.isExist;
},
click3(){//停止调用缓存中的组件或者调用缓存中的组件，会触发缓存相关的那两个周期函数
this.isShowCaheComponent = !this.isShowCaheComponent;
}
}
}
</script>
<style scoped>
</style>
