Ciclo de vida avanzado de Vue

Hoy vamos a sumergirnos en los métodos del ciclo de vida de Vue. Las funciones de enlace del ciclo de vida en Vue se refieren a funciones que se ejecutan automáticamente durante la creación de instancias.Estas funciones nos ayudan a administrar varias etapas de instancias personalizadas de Vue, como creación de instancias, representación, actualización y destrucción. Comprender cómo funciona el ciclo de vida puede ayudarlo a administrar mejor el estado de su aplicación Vue, así que comencemos.

Diagrama de fase del ciclo de vida

El ciclo de vida de Vue se puede dividir en 8 etapas. El siguiente es un diagrama de las etapas de un ciclo de vida:

 

• beforeCreate: La instancia acaba de ser creada, y no se ha configurado ni la observación de datos ni el mecanismo de eventos.
• creado: la instancia ha sido creada, la observación de datos ( datapropiedades, etc.) y el mecanismo de eventos ( methodsetc.) han sido configurados. Pero en este momento el nodo DOM aún no se ha montado.
• beforeMount: el nodo DOM se ha generado, pero aún no se ha montado en la instancia.
• montado: el nodo DOM se ha montado en la instancia y  vm.$el la propiedad apunta al DOM real.
• beforeUpdate: los datos cambian y se activan antes de que se vuelva a representar el DOM virtual, lo que ocurre antes de que se calcule el DOM virtual.
• actualizado: se activa después de que el DOM virtual se vuelve a representar y se aplica al DOM.
• beforeDestroy: activado antes de que se destruya la instancia, la instancia aún está disponible en este momento.
• destruido: se activa después de que se destruye la instancia, en este momento la instancia ya no se puede usar.

Ejemplo de código para el ciclo de vida

El siguiente es un ejemplo simple del ciclo de vida de actualización de la instrucción v-for updated. Este componente monitorea wordsla actualización de la matriz. Cada vez que la matriz de la instrucción v-for cambie, imprimiremos el nuevo contenido de la matriz en la consola. .

<template>
  <div>
    <label>添加单词:</label>
    <input v-model="inputValue" @keyup.enter="addWord">
    <ul>
      <li v-for="word in words" :key="word">{
   
   { word }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: [],
      inputValue: ""
    };
  },
  methods: {
    addWord() {
      if (this.inputValue) {
        this.words.push(this.inputValue);
        this.inputValue = "";
      }
    }
  },
  updated() {
    console.log("Words updated", this.words);
  }
};
</script>

En el código anterior, cada vez que wordsse actualiza el valor de la matriz, updatedse activará la función de enlace y se imprimirá el contenido de la matriz actualizado más reciente.

Resumir

En este blog, presentamos el ciclo de vida de Vue en detalle y proporcionamos un código de muestra simple para mostrar la aplicación de la función de enlace del ciclo de vida. Un punto clave del uso del ciclo de vida de Vue es saber cuándo se activan las funciones de enlace correspondientes y el mejor momento para usarlas en la aplicación. Espero que este blog pueda ayudarlo a comprender mejor cómo usar el ciclo de vida de Vue.