Cuando se trata del orden de ejecución del ciclo de vida de una plantilla, todos podemos hablar con gusto, pero ¿qué pasa con la función de ejecución del ciclo de vida del componente padre-hijo?
El orden de ejecución del ciclo de vida de los componentes padre e hijo:
Código del componente principal:
<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>
Código de subcomponente:
<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>
El componente principal realiza primero una ejecución, completa las tres primeras etapas del ciclo de vida y luego no continúa la ejecución y luego completa el ciclo de vida del componente secundario. Finalmente, el componente principal completa su etapa de montaje.
El orden de ejecución de la función de gancho de destrucción es el mismo que el del proceso montado.