Diretório de artigos
1. Ciclo de vida do componente pai-filho no Vue
1-1 Carregue o processo de renderização
- Ordem de execução: o componente pai é criado primeiro, depois o componente filho é criado; o componente filho é montado primeiro e depois o componente pai é montado
- pai antesCreate
- pai criado
- pai antes de Mount
- filho antes de criar
- criado por criança
- Montado em criança
- pai montado
1-2 Processo de destruição
-
- pai antes de destruir
- criança antes de destruir
- criança destruída
- pai destruído
1-3 Vitrines
- Mostrar
2. Código [pode ser colado e executado]
<!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 do componente pai-filho no React
2-1 Introdução ao ciclo de vida das versões novas e antigas do React
-
O ciclo de vida de reação refere-se a todo o processo, desde a criação até o descarregamento dos componentes. Cada processo possui uma função de gancho correspondente que será chamada. Possui principalmente as seguintes etapas:
- Fase de montagem: o processo no qual as instâncias do componente são criadas e inseridas na árvore DOM
- Fase de atualização: o processo no qual o componente é renderizado novamente
- Fase de descarregamento: o processo no qual um componente é removido da árvore DOM
-
2-2 Ciclo de vida do componente pai-filho
2-2-1 Inicialização do componente pai-filho
- construtor do componente pai
- Componente pai getDerivedStateFromProps
- renderização do componente pai
- Construtor de subcomponente
- Subcomponente getDerivedStateFromProps
- renderização de subcomponente
- Subcomponente componenteDidMount
- Componente pai componentDidMount
2-2-2 Os subcomponentes modificam seu próprio estado
- Subcomponente getDerivedStateFromProps
- Subcomponente deveriaComponentUpdate
- renderização de subcomponente
- Subcomponente getSnapShotBeforeUpdate
- Subcomponente componenteDidUpdate
2-2-3 Adereços de modificação do componente pai
- Componente pai getDerivedStateFromProps
- componente pai deveriaComponentUpdate
- renderização do componente pai
- Subcomponente getDerivedStateFromProps
- Subcomponente deveriaComponentUpdate
- renderização de subcomponente
- Subcomponente getSnapShotBeforeUpdate
- Componente pai getSnapShotBeforeUpdate
- Subcomponente componenteDidUpdate
- Componente pai componentDidUpdate
2-2-4 Desinstalar subcomponentes
- Componente pai getDerivedStateFromProps
- componente pai deveriaComponentUpdate
- renderização do componente pai
- Componente pai getSnapShotBeforeUpdate
- Subcomponente componenteWillUnmount
- Componente pai componentDidUpdate
Os problemas encontrados no desenvolvimento do Vue, basta pisar primeiro em um poço para o React, enfim, tem que ser enterrado