Sobre el uso, comprensión y propósito del ciclo de vida de vue3 (versión detallada)

directorio de ciclo de vida

Prefacio
El método de escritura combinado no tiene un ciclo de vida antes de crear/creado, y el ciclo de vida de escritura combinado utiliza el que se cita primero.
Resumir

Prefacio

Cada instancia de componente de Vue debe pasar por una serie de pasos de inicialización cuando se crea, como escuchar datos, compilar plantillas, montar la instancia en el DOM y actualizar el DOM cuando cambian los datos. En el camino, también ejecuta funciones llamadas enlaces de ciclo de vida, brindando a los desarrolladores la oportunidad de ejecutar su propio código en etapas específicas. Los más utilizados son creado, montado, actualizado y desmontado. Puede escuchar cambios de un determinado tipo y realizar una determinada operación. No hay mucha diferencia con vue2.

Insertar descripción de la imagen aquí

El método de escritura combinado no tiene un ciclo de vida antes de crear/creado, y el ciclo de vida de escritura combinado utiliza el que se cita primero.

antes de crear

beforeCreate función de ciclo de declaración opcional
.Se llama antes de que se inicialice la instancia del componente (se ha analizado el análisis de accesorios, las opciones como datos y cálculo aún no se han procesado)
No puede acceder a la instancia del componente ni a sus fuentes de datos y funciones en el componente.
No se puede acceder a la vista del elemento DOM en el componente
El enlace setup() en la API combinada se llamará antes que todos los enlaces API opcionales.

Escritura de opciones:

    // 组件实例话之前
    // 可以访问 props 的数据的
    // 不能访问组件的实例 this 中的数据源和函数等
    // 不能访问组件中的视图DOM元素
 beforeCreate() {
        console.log('----------------------------')
        console.log('beforeCreate 组件实例话之前')
        console.log(this.$props.subtitle)
        console.log('不能访问组件的实例 this 中的数据源和函数等');
        console.log('不能访问组件中的视图DOM元素');
        // console.log(this.age)
        // this.showMessage()
        // console.log(document.getElementById('title').innerHTML)
    },

Escritura combinada:

 没有 beforeCreate 生命周期

creado

función de ciclo de vida opcional creada
Se llama después de que la creación de instancias del componente sea exitosa
El componente accesible instancia esto y sus fuentes de datos y funciones en el componente, etc.
No se puede acceder a la vista del elemento DOM en el componente

Escritura de opciones:

	// 组件视图渲染之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

Escritura combinada:

没有 created 生命周期

antes del montaje/enantes del montaje

beforeMount: función de ciclo de vida opcional, onBeforeMount: gancho de ciclo de vida combinado
La vista del componente se llama antes de que el navegador represente
Elementos de instancia de componentes accesibles (fuentes de datos, funciones, propiedades calculadas, etc.)
No se puede acceder a los elementos DOM en la vista de componentes

Escritura de opciones:
beforeMount

 	 // 组件视图渲染之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

Escritura combinada:
onBeforeMount

import { onBeforeMount} from 'vue'

// 组件视图渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {
    console.log('------------------------')
    console.log('onBeforeMount 组件视图渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

montado/enMontado

montado: función de ciclo de vida opcional, montado: gancho de ciclo de vida combinado
La vista del componente se llama después de que el navegador renderiza
Elementos de instancia de componentes accesibles (fuentes de datos, funciones, propiedades calculadas, etc.)
Puede acceder a elementos DOM en vistas de componentes

Escritura de opciones:

Montar

  // 组件视图渲染之后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    mounted() {
        console.log('----------------------------')
        console.log('mounted 组件视图渲染之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

Escritura combinada:
onMounted

import { onMounted} from 'vue'

// 组件视图渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 可以访问组件视图中的 DOM 元素
onMounted(() => {
    console.log('------------------------')
    console.log('onMounted 组件视图渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

antes de la actualización/enantes de la actualización

beforeUpdate: función de ciclo de vida opcional, onBeforeUpdate: enlace de ciclo de vida combinado
Cuando la fuente de datos cambia, se llama antes de volver a representar la vista del componente.
Elementos de instancia de componentes accesibles (fuentes de datos, funciones, propiedades calculadas, etc.)
Se puede acceder a los elementos DOM en el componente antes de la actualización, pero no se puede acceder a los elementos DOM en el componente después de la actualización

Escritura de opciones:

antes de actualizar

 // 数据源发生改变，视图重新渲染前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之前的状态
    beforeUpdate() {
        console.log('----------------------------')
        console.log('beforeUpdate 数据源发生改变，视图重新渲染前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

Método de escritura combinado:
onBeforeUpdate

import { onBeforeUpdate } from 'vue'

// 数据源发生变化，组件视图重新渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {
    console.log('------------------------')
    console.log('onBeforeUpdate 数据源发生变化，组件视图重新渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

actualizado/enActualizado

actualizado: función de ciclo de vida opcional, actualizado: gancho de ciclo de vida combinado
Cuando la fuente de datos cambia, se llama después de volver a representar la vista del componente.
Elementos de instancia de componentes accesibles (fuentes de datos, funciones, propiedades calculadas, etc.)
No puede acceder a los elementos DOM en el componente antes de la actualización, pero puede acceder a los elementos DOM en el componente después de la actualización.

Escritura de opciones:

actualizado

 // 数据源发生改变，视图重新渲染后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之后的状态
    updated() {
        console.log('----------------------------')
        console.log('updated 数据源发生改变，视图重新渲染后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

Escritura combinada:
onUpdated

import { onUpdated } from 'vue'

// 数据源发生变化，组件视图重新渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {
    console.log('------------------------')
    console.log('onUpdated 数据源发生变化，组件视图重新渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

antes de desmontar/enantes de desmontar

abeforeUnmount: función de ciclo de vida opcional, onBeforeUnmount: gancho de ciclo de vida combinado
Llamado antes de que se descargue la instancia del componente.
Elementos de instancia de componentes accesibles (fuentes de datos, funciones, propiedades calculadas, etc.)
Puede acceder a elementos DOM en vistas de componentes

Escritura de opciones:

antes de desmontar

// 组件在卸载之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访组件视图的 DOM 元素
    beforeUnmount() {
        console.log('----------------------------')
        console.log('beforeUnmount 组件在卸载之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

Método de escritura combinado:
onBeforeUnmount

import { onBeforeUnmount } from 'vue'

// 组件卸载之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {
    console.log('------------------------')
    console.log('onBeforeUnmount 组件卸载之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

desmontado/encendidoDesmontado

unmounted: función de ciclo de vida opcional, onUnmounted: gancho de ciclo de vida combinado
Se llama después de descargar la instancia del componente.
Elementos de instancia de componentes accesibles (fuentes de datos, funciones, propiedades calculadas, etc.)
No se puede acceder a elementos DOM en vistas de componentes
Generalmente en esta función de ciclo de vida, podemos limpiar manualmente algunos efectos secundarios, como temporizadores, detectores de eventos DOM o conexiones al servidor.

Escritura de opciones:

desmontado

// 组件已卸载
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不可访组件视图的 DOM 元素
    unmounted(){
        console.log('----------------------------')
        console.log('unmounted 组件已卸载')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    }

Escritura combinada:
onUnmounted

import { onUnmounted} from 'vue'

// 组件卸载之后
// 能访问组件实例的东西（数据源、函数等）
// 不能访问组件视图 DOM 元素
onUnmounted(() => {
    console.log('------------------------')
    console.log('onUnmounted 组件卸载之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

Resumir

Una instancia de Vue tiene un ciclo de vida completo, es decir, una serie de procesos como creación, inicialización de datos, compilación de plantillas, montaje de Dom, renderizado → actualización → renderizado, desinstalación, etc. A esto lo llamamos ciclo de vida de Vue. . En términos sencillos, el proceso desde la creación hasta la destrucción de una instancia de Vue es el ciclo de vida.
A lo largo de todo el ciclo de vida de Vue, proporciona una serie de eventos que nos permiten registrar métodos js cuando se activan eventos, lo que nos permite controlar toda la situación con nuestros propios métodos js registrados. Esto en estos métodos de respuesta a eventos apunta directamente a es una instancia de vue.