Función de ciclo de vida de Vue (explicación detallada)

beforeCreate, creado	antes de la creación, después de la creación
beforeMount、montado	antes del monte, después del monte
beforeUpdate、actualizado	antes de la actualización, después de la actualización
beforeDestroy、destruido	antes de la destrucción, después de la destrucción

Código HTML unificado para los siguientes cuatro escenarios de aplicación

<div id="app">
    {
   
   {myName}}
</div>

La diferencia entre beforeCreate y created

antes de la creación, después de la creación

beforeCreate crea la escena de la aplicación antes de crear

Código Vue:

var app = new Vue({
        el: '#app',
        data() {
            return {
                myName:'abc',
            }
        },
        beforeCreate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("created",this.myName,bodyDom);
        }
    });

Salida del navegador:

Los datos de data en beforeCreate no están definidos, created va seguido de indefinido y { {myName}} no ha sido reconocido

escenarios de aplicación creados después de la creación

Código Vue:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    created(){
        //获取body并输出测试
        var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
        console.log("created",this.myName,bodyDom);
    }
});

Salida del navegador:

created principalmente realiza la inicialización de datos de algunos datos de la página y obtiene el valor de myName, pero el valor de {{myName}} que se muestra en segundo plano aún no se completa

La diferencia entre beforeMount ymontado

antes del monte, después del monte

escenario de aplicación beforeMount antes del montaje

Código Vue:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeMount(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Salida del navegador:

El resultado de salida es el mismo que se crea después de la creación, antes de montar después de la creación, siento que no es muy útil

escenario de aplicación montado

Código Vue:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    mounted(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Salida del navegador:

Los datos se han renderizado en la Vista.

La diferencia entre beforeUpdate y actualizado

Antes de la actualización, después de la actualización; diferente de los otros tres se puede repetir

Escenario de aplicación antes deActualizar actualización

Código Vue:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    beforeUpdate(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Salida del navegador:

Los datos no han cambiado antes de la actualización de datos.

escenario de aplicación actualizado después de la actualización

Código Vue:

var app = new Vue({
    el: '#app',
    data() {
        return {
            myName:'abc',
        }
    },
    updated(){
            //获取body并输出测试
            var bodyDom=document.getElementsByTagName("body")[0].innerHTML;
            console.log("beforeMount",this.myName,bodyDom);
        },
    }
});

Salida del navegador:

Después de la actualización de datos, los datos han cambiado

La diferencia entre beforeDestroy y destruido

antes de la destrucción, después de la destrucción

beforeDestroy antes de la destrucción

Escenarios comúnmente aplicados:

claro temporizador
Desvincular eventos personalizados
Darse de baja, oyente de eventos

ninguna demostración de código específico

destruido _

Esta función de enlace se ejecutará después de que se destruya la instancia del componente.En este momento, se destruyen todos los componentes, incluidos los subcomponentes.

No hay una demostración de código específica.

Resumir

Varias funciones del ciclo de vida tienen sus propias características y se utilizan diferentes funciones del ciclo de vida para resolver problemas de acuerdo con diferentes negocios.