Directorio de artículos
1. Ciclo de vida del componente padre-hijo en Vue
[Conceptos básicos de Vue 6] - Explicación detallada del ciclo de vida
1-1 Cargar el proceso de renderizado
- Orden de ejecución: primero se crea el componente principal, luego se crea el componente secundario; primero se monta el componente secundario y luego se monta el componente principal
- padre antes de crear
- padrecreado
- padre antes del monte
- niño antes de crear
- niño creado
- Montado para niños
- padre montado
1-2 Proceso de destrucción
-
- padre antes de destruir
- niño antes de destruir
- niño destruido
- padre destruido
1-3 vitrinas
- Mostrar
2. Código [se puede pegar y ejecutar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<school />
</div>
<script>
// 子组件
const student = Vue.extend({
name: 'student',
template: `
<div>子组件</div>
`,
data() {
return {
};
},
beforeCreate() {
console.log("子组件————beforeCreate...");
},
created() {
console.log("子组件————create...");
},
beforeMount() {
console.log("子组件————beforeMount...");
},
mounted() {
console.log("子组件————mounted...");
},
beforeUpdate() {
console.log("子组件————beforeUpdate...");
},
updated() {
console.log("子组件————updated...");
},
beforeDestroy() {
console.log("子组件————beforeDestroy...");
},
destroyed() {
console.log("子组件————destroyed...");
}
})
// 父组件
const school = Vue.extend({
name: 'school',
template: `
<div>
{
{text}}
<button @click="handle">点击销毁</button>
<student/>
</div>
`,
components: {
student
},
data() {
return {
text: "哈哈",
};
},
methods: {
handle() {
this.$destroy();
},
},
beforeCreate() {
console.log("父组件————beforeCreate...");
},
created() {
console.log("父组件————create...");
},
beforeMount() {
console.log("父组件————beforeMount...");
},
mounted() {
console.log("父组件————mounted...");
},
beforeUpdate() {
console.log("父组件————beforeUpdate...");
},
updated() {
console.log("父组件————updated...");
},
beforeDestroy() {
console.log("父组件————beforeDestroy...");
},
destroyed() {
console.log("父组件————destroyed...");
},
})
const vm = new Vue({
name: 'vm',
el: '#root',
components: {
school
}
})
</script>
</body>
</html>
https://www.jb51.net/article/145474.htm
2. Ciclo de vida del componente padre-hijo en React
2-1 Introducción al ciclo de vida de las versiones nueva y antigua de React
-
El ciclo de vida de reacción se refiere al proceso completo desde la creación hasta la descarga de componentes. Cada proceso tiene una función de enlace correspondiente que será llamada. Tiene principalmente las siguientes etapas:
- Fase de montaje: el proceso en el que se crean e insertan instancias de componentes en el árbol DOM
- Fase de actualización: el proceso en el que se vuelve a renderizar el componente.
- Fase de descarga: el proceso en el que se elimina un componente del árbol DOM
-
2-2 Ciclo de vida del componente padre-hijo
2-2-1 Inicialización del componente padre-hijo
- constructor del componente padre
- Componente principal getDerivedStateFromProps
- renderizado del componente principal
- Constructor de subcomponentes
- Subcomponente getDerivedStateFromProps
- renderizado de subcomponentes
- Componente subcomponenteDidMount
- Componente principal componenteDidMount
2-2-2 Los subcomponentes modifican su propio estado.
- Subcomponente getDerivedStateFromProps
- El subcomponente debería ComponentUpdate
- renderizado de subcomponentes
- Subcomponente getSnapShotBeforeUpdate
- Componente del subcomponenteDidUpdate
2-2-3 Componente principal modificar accesorios
- Componente principal getDerivedStateFromProps
- componente principal debe ComponentUpdate
- renderizado del componente principal
- Subcomponente getDerivedStateFromProps
- El subcomponente debería ComponentUpdate
- renderizado de subcomponentes
- Subcomponente getSnapShotBeforeUpdate
- Componente principal getSnapShotBeforeUpdate
- Componente del subcomponenteDidUpdate
- Componente principal componenteDidUpdate
2-2-4 Desinstalar subcomponentes
- Componente principal getDerivedStateFromProps
- componente principal debe ComponentUpdate
- renderizado del componente principal
- Componente principal getSnapShotBeforeUpdate
- Componente subcomponenteWillUnmount
- Componente principal componenteDidUpdate
Los problemas encontrados en el desarrollo de Vue simplemente pisaron un pozo para React primero, en resumen, hay que enterrarlo.