谈到一个模板的生命周期执行顺序我们每个人都可以谈的津津有味,但是父子组件的生命周期执行函数是怎样的呢?
父子组件生命周期执行顺序:
父组件代码:
<template>
<div>
<mo-ban></mo-ban>
</div>
</template>
<script>
import moBan from './moban'
export default {
components: {
moBan
},
data() {
return {
};
},
beforeCreate() {
console.log("父组件---创建前");
},
created() {
console.log("父组件---创建后");
},
beforeMount() {
console.log("父组件---载入前");
},
mounted() {
console.log("父组件---载入后");
},
beforeUpdate() {
console.log("父组件---更新前");
},
updated() {
console.log("父组件---更新后");
},
beforeDestroy() {
console.log("父组件---删除前");
},
destroyed() {
console.log("父组件---删除后");
},
};
</script>
<style lang='less' scoped>
</style>
子组件代码:
<template>
<div>
{
{
name }}
</div>
</template>
<script>
export default {
data() {
return {
name: "子组件",
};
},
beforeCreate() {
console.log("子组件---创建前");
},
created() {
console.log("子组件---创建后");
},
beforeMount() {
console.log("子组件---载入前");
},
mounted() {
console.log("子组件---载入后");
},
beforeUpdate() {
console.log("子组件---更新前");
},
updated() {
console.log("子组件---更新后");
},
beforeDestroy() {
console.log("子组件---删除前");
},
destroyed() {
console.log("子组件---删除后");
},
};
</script>
<style lang='less' scoped>
</style>
父组件先进行一个执行,完成生命周期的前三个阶段,然后就不在继续执行,继而去完成子组件的生命周期。最后父组件完成自己的mounted阶段。
destroy 钩子函数执行顺序是先子后父跟mounted过程一样。