vue(18)声明周期函数
vue每个组件都有是个生命周期函数，会在组件渲染的不同时期调用，下面时对各个周期函数的实际调用例子：
子组件：
<template>
<div>
这是子组件
<br>
{{count}}
</div>
</template>
<script>
export default ({
data:function(){
return{
count:1
}
},
methods:{
},
beforeCreate(){//这是第一个生命周期函数；此时，组件的data和methods以及页面DOM结构，都还没有初始化；所以此阶段，什么都做不了。
console.log('组件实例刚刚被创建···');
},
created(){//这个组件创建阶段第二个生命周期函数，此时，组件的data和methods已经可以用了；但是页面还没有渲染出来；在这个生命周期函数中，我们经常会发起Ajax请求；
console.log('组件实例已经创建完成···');
},
beforeMount(){//拿到data中的数据，解析指定，将模板渲染完成，保存在内存中，注意这时还在内存中没有在页面渲染出来
console.log('模板编译之前···');
},
mounted(){//将内存中渲染好的模板替换到页面上，mounted是组件创建阶段最后的一个生命周期函数；此时，页面已经真正的渲染好了，用户可以看到真实的页面数据了；
console.log('模板编译完成···');
},
beforeUpdate(){//子组件的某个变量被改变时，并且这个变量改变影响了页面的显示效果。更新前
console.log('数据更新之前···');
},
updated(){//子组件的某个变量被改变时，并且这个变量改变影响了页面的显示效果。更新完成后
console.log('数据更新完成···');
},
activated(){//缓存的组件被隐藏停止调用时
console.log('keep-alive缓存的组件激活时调用···');
},
deactivated(){//缓存的组件被调用时
console.log('keep-alive缓存的组件停用时调用···');
},
beforeUnmount(){
console.log('实例销毁之前···');
},
unmounted(){
console.log('实例销毁完成···');
}
})
</script>
<style scoped>
</style>
父组件：
<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>
