When it comes to the life cycle execution order of a template, we can all talk with gusto, but what about the life cycle execution function of the parent-child component?
The life cycle execution order of the parent and child components:
Parent component code:
<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>
Sub-component code:
<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>
The parent component performs an execution first, completes the first three stages of the life cycle, and then does not continue execution, and then completes the life cycle of the child component. Finally, the parent component completes its mounted stage.
The execution order of the destroy hook function is the same as the mounted process.