[Frontal] Función del ciclo de vida de Vue (explicación detallada + diagrama chino)

1. ¿Qué es el ciclo de vida?

1. Significado

• ciclo vital:El proceso desde la creación de la instancia de vue hasta el momento en que la instancia de vue está en éxtasis

2. entender

• instancia de vistaProceso de creación y destrucción.comoLa vida humana desde el nacimiento hasta la muerte.. ¿Qué podemos hacer durante algunas de estas experiencias importantes , es decir, en momentos especiales?
• En la vida de vue, desde el momento en que se crea el componente de vue hasta su destrucción, también se establecen varios períodos especiales.punto en el tiempo, para comodidad de los desarrolladores a la hora de implementartiempo específicoDejar vue en un momento específicohacer cosas especificas. Se establece mediante un método llamado "función de enlace del ciclo de vida". En vue, la vida útil de vue está dominada por 8 funciones de enlace del ciclo de vida.
• También puede entenderse como una función de devolución de llamada. Cuando escribimos una función periódica, Vue ejecutará automáticamente esta función en el momento especificado.

Función de enlace: puede entenderse simplemente como una función que el sistema ejecuta automáticamente en diferentes etapas sin la intervención del usuario.

2. Definición de ciclo de vida (sitio web oficial)

1、vista2

ciclo de vida de vue2

2、ver3

Ciclo de vida de Vue3

3. Diagrama de ciclo de vida.

1. Diagrama del ciclo de vida de Vue2

2. Diagrama del ciclo de vida de Vue3

4. El ciclo de vida de Vue

Los eventos principales del ciclo de vida de Vue se dividen en dos ganchos, que se llaman antes y después del evento, y hay 4 eventos principales (8 ganchos) en la aplicación Vue.

● Crear: se ejecuta cuando se crea el componente.
● Montar: se ejecuta cuando se monta el DOM.
Actualizar: se ejecuta cuando se modifican los datos de respuesta.
Destruir: se ejecuta inmediatamente antes de que se destruya el elemento.

Cinco, la diferencia entre el ciclo de vida de Vue2 y el ciclo de vida de Vue3

Seis, las principales etapas del ciclo de vida de Vue y 8 funciones de ciclo.

1. API de opciones y API de composición.

En [API de opciones], el enlace del ciclo de vida es una opción expuesta en la instancia de vue, solo necesitamos llamarla y usarla.
En [API de composición], debemos introducir el enlace del ciclo de vida en el proyecto antes de que pueda usarse.

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

En la API combinada, use el método setup() para reemplazar beforeCreate y creado, luego los métodos en estos dos ciclos de vida se ejecutarán en setup()

2. Fase de creación (inicialización de propiedades relacionadas): beforeCreate (), creado ()

• antes de crear
• Nota : En este momento, los datos en data no se pueden obtener, es deciresto.$datostengo esindefinido
• creado

2. Etapa antes del montaje: beforeMount(), onBeforeMount()

1. Se llama antes de que el componente DOM se represente realmente. En este momento, el elemento raíz aún no está. En la API de opciones, puede usar this.$data para acceder; en la API de composición, debe usar ref en el elemento raíz si quiero acceder

import { ref, onBeforeMount } from "vue";

  export default {
    setup() {
      console.log("setup,创建前后")
      const count = ref({
        str: '你好',
        number: 123
      })

      onBeforeMount(() => {
        console.log("onBeforeMount -- composition API", "挂载前",count.value.str)
      })

      return {
        count,
      }
    },

    data(){
      return{
        number: 123
      }
    },
    beforeMount() {
      console.log("beforeMount -- options API,挂载前",this.$data.number)
    },

3. Etapa posterior al montaje: montado (), onMounted ()

1. montado(), onMounted() [esto es cuando se carga la página]
2. Nota : De forma predeterminada, solo se activará una vez en el ciclo de vida del componente.

import { ref, onMounted } from "vue";

  export default {
    setup() {
      console.log("setup,创建前后")
      const count = ref({
        str: '你好',
        number: 123
      })

      onMounted(() => {
        console.log("onMounted -- composition API", "挂载前",count.value.str)
      })

      return {
        count,
      }
    },

    data(){
      return{
        number: 123
      }
    },
    mounted() {
      console.log("mounted -- options API,挂载前",this.$data.number)
    },

4. Fase de actualización (operación de cambio de elemento o componente): beforeUpdate(), actualizado(), onBeforeUpdate(), onUpdated()

1. Se llama cuando se actualizan los datos. Después de actualizar el DOM, se llamarán los métodos actualizado() y onUpdated()
2. reactivable

<template>
  <div>
    <h1>Hello World</h1>
    {
   
   { count.str }}
    <button @click="changeStr">修改str的按钮</button>
  </div>
  <hr />
  <div>
    <h1>Hello World</h1>
    {
   
   { this.$data.number }}
    <button @click="changeNumber">修改number的按钮</button>
  </div>
</template>

<script>
  import {
      
       ref, onBeforeUpdate, onUpdated } from "vue";

  export default {
      
      
    //Vue3写法
    setup() {
      
      
      console.log("setup,创建前后")
      const count = ref({
      
      
        str: '你好',
        number: 123
      })
      onBeforeUpdate(() => {
      
      
        console.log("onBeforeUpdate -- composition API", "更新前")
      })
      onUpdated(() => {
      
      
        console.log("onUpdated -- composition API", "更新后",count.value.str)
      })

      function changeStr() {
      
      
        count.value.str = "已修改"
      }

      return {
      
      
        count,
        changeStr
      }
    },

    //Vue2写法
    data(){
      
      
      return{
      
      
        number: 123
      }
    },
    methods: {
      
      
      changeNumber() {
      
      
        this.$data.number = 456
      }
    },

    beforeUpdate() {
      
      
      console.log("beforeUpdate -- options API,更新前")
    },
    updated() {
      
      
      console.log("updated -- options API,更新后",this.$data.number)
    },
  }
</script>

5. Fase de destrucción (destrucción de atributos relacionados): beforeUnmount() y onBeforeUnmounted(), unmounted() y onUnmounted()

¿Cuándo se desencadena? : cierra la página (no el navegador)

<script>
import {
      
       ref, onBeforeUnmount, onUnmounted } from "vue";

export default {
      
      
    setup() {
      
      
        onBeforeUnmount(() => {
      
      
            console.log("onBeforeUnmount -- composition API", "销毁前")
        })
        onUnmounted(() => {
      
      
            console.log("onUnmounted -- composition API", "销毁后")
        })
    },


    beforeUnmount() {
      
      
        console.log("beforeUnmount -- options API,销毁前")
    },
    unmounted() {
      
      
        console.log("unmounted -- options API,销毁后")
    }
}
</script>

7. Preguntas de la entrevista

1. ¿Cuáles son los ciclos de vida de vue de uso común?

①. Puntos principales

4 etapas, 8 funciones periódicas

2. Si existe una relación padre-hijo entre componentes, ¿cuál es el orden en que se ejecutan los ciclos de vida del componente padre (A) y del componente hijo (B)?

①, línea de pensamiento

• Un componente tiene 8 ciclos comunes: crear 2, montar 2, actualizar 2, destruir 2
• El componente B tiene 8 ciclos comunes: crear 2, montar 2, actualizar 2, destruir 2

②, la respuesta

• Dividir 8 ciclos en tres fases (1-4, 5-6, 7-8)
• Etapa de renderizado: padre 1 → padre 2 → padre 3 → hijo 1 → hijo 2 → hijo 3 → hijo 4 → padre 4
• Fase de actualización: padre 5 → hijo 5 → hijo 6 → padre 6
• Fase de actualización: padre 5 → hijo 5 → hijo 6 → padre 6