Entrevistador: ¿Qué hace Vue en cada ciclo de vida?

¡Acostúmbrate a escribir juntos! Este es el segundo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

prefacio

Esta es una pregunta de entrevista muy frecuente. Generalmente, si el entrevistador va a hacer preguntas relacionadas con Vue, a menudo comienzan con el ciclo de vida de Vue. Muchos socios pequeños pueden pensar que esta pregunta es muy simple, por lo que a menudo no se preparan, como resultado, la respuesta no siempre es lo suficientemente completa y el entrevistador pensará que tiene una actitud inapropiada.

Entonces, ¡aprendamos lo básico! ¡Al menos ten la actitud correcta!

1. ¿Cuál es el ciclo de vida de Vue?

Si usa el marco Vue, aprender su ciclo de vida es inevitable. Vivimos en la vejez, la enfermedad y la muerte, el polvo vuelve al polvo y la tierra vuelve a la tierra, esto es un ciclo. Lo mismo es cierto para una aplicación Vue, desde la creación inicial hasta la desaparición final, que también es un ciclo.

La vida de una persona se divide en etapas: infancia, adolescencia, juventud, mediana edad y vejez. Necesitamos hacer cosas diferentes en diferentes etapas. Lo mismo es cierto para una aplicación Vue, excepto que reemplaza las diversas etapas del ciclo de vida con funciones de enlace.Dentro de la función de enlace es lo que tenemos que hacer.

Una imagen en el sitio web oficial presenta muy claramente el ciclo de vida de una aplicación o componente de Vue:

Este es un diagrama del ciclo de vida de Vue2.x.Desde la creación hasta la destrucción, se divide en estas etapas: antes de crear, creado, antes de montar, montado, antes de actualizar, actualizado, antes de destruir, destruido.

Estas son las funciones de gancho correspondientes a cada etapa, al igual que cada etapa de nuestra vida, luego hablemos de lo que está haciendo cada función de gancho.

2.beforeCreate

La primera función periódica, se ejecutará antes de que se cree la instancia de Vue. En este momento, los datos o métodos en datos y métodos no se han inicializado y no se pueden llamar. Solo se pueden usar algunos eventos predeterminados.

Código de muestra:

<script>
export default {
  data() {
    return {
      msg: "小猪课堂",
    };
  },
  beforeCreate() {
    console.info("-----beforeCreate-----");
    console.info("data", this.msg);
    console.info("methods", this.getMsg);
  },
  methods: {
    getMsg() {
      return
    },
  },
};
</script>
复制代码

Resultado de salida:

En el código anterior, definimos un dato data y un método.Como puede ver, no podemos obtener los datos y métodos en la función de enlace beforeCreate, porque no se han inicializado en este momento.

3.creado

顾名思义，该钩子函数是在Vue实例化之后执行的，此时data和methods已经初始化完成了，可以供我们调用，但是模板还没有编译，也就是我们还不能获取到DOM。

实例代码：

created() {
  console.info("-----created-----");
  console.info("data", this.msg);
  console.info("methods", this.getMsg);
  console.info("el", this.$el);
},
复制代码

输出结果：

可以看到data和methods可以获取到了，但是el节点还不能获取，因为此时模板渲染还没有开始。

4.beforeMount

该钩子函数在模板渲染之前调用，也就是DOM节点挂载到真实DOM树之前调用。此模板进行编译，会调用render函数生成vDom，也就是虚拟DOM，此时我们同样无法获取DOM节点。

示例代码：

beforeMount(){
  console.info("-----beforeMount-----");
  console.info("el", this.$el);
},
复制代码

输出结果：

可以看到此时我们同样是无法获取DOM节点的，因为此时只存在VDOM，还在JS级别。

5.mounted

执行该钩子函数时，我们的模板编译好了，而且挂载到真实DOM树上面去了，也就是我们的页面可以显示了。

示例代码：

mounted(){
  console.info("-----mounted-----");
  console.info("el", this.$el);
},
复制代码

输出结果：

此时我们可以获取到DOM节点了。

6.beforeUpdate

上面的生命周期函数其实都发生在初始化阶段，当我们的页面或者组件发生变化时，便会执行对应的更新阶段的钩子函数。

该钩子函数在data数据发生变化之后调用，此时data里面的数据已经是最新的了，但是页面上DOM还没有更新最新的数据。

示例代码：

beforeUpdate() {
  console.info("-----beforeUpdate-----");
  console.info("data", this.msg);
},
methods: {
  getMsg() {
    return;
  },
  changeMsg() {
    this.msg = "更改后的小猪课堂";
  },
},
复制代码

输出结果：

上段代码中我们新增了一个改变data数据的方法，点击页面上的按钮便会更改数据，然后我们在beforeUpdate钩子函数后面打了一个断点。此时会发现控制台打印的msg和页面上的msg不一致，这也就印证beforeUpdate发生在data更新之后，DOM渲染之前。

7.updated

该钩子函数会在data数据更新之后执行，而且此时页面也渲染更新完成了，显示的就是最新的数据。

示例代码：

updated(){
  console.info("-----updated-----");
  console.info("data", this.msg);
},
methods: {
  getMsg() {
    return;
  },
  changeMsg() {
    this.msg = "更改后的小猪课堂";
  },
},
复制代码

输出结果：

上段代码基本和beforeUpdate代码一样，我们在updated钩子函数后面打了一个断点，当执行该钩子函数的时候，我们发现此时页面上的数据和我们data中的数据是一致的，说明此时data和页面都已经完成了更新。

注意：不要在updated中修改data数据，很容易造成死循环。

8.beforeDestroy

Esta función de enlace se produce antes de que se destruya la instancia del componente Vue. En este momento, el componente no se ha destruido realmente y se puede usar con normalidad. Por lo general, cancelamos algunos eventos globales o personalizados en esta función de enlace.

Código de muestra:

beforeDestory(){
  console.info("-----beforeDestory-----");
  console.info("组件销毁之前");
},
复制代码

9.destruido

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

Código de muestra:

destroyed(){
  console.info("-----destroyed-----");
  console.info("组件被销毁");
},
复制代码

Por lo general, solo queda el shell DOM en este punto.

10. Suplemento

Por lo general, cuando cambiamos rutas y otras operaciones, los componentes se destruirán y, cuando vuelvan a cambiar, los componentes se volverán a renderizar. Pero a veces, para mejorar el rendimiento, podemos cambiar de ruta sin destruir los componentes.En este momento, necesitamos usar keep-alive, un componente integrado de Vue.

Los componentes envueltos con componentes keep-alive no serán destruidos Después de usar keep-alive, tendremos dos funciones de ciclo de vida más.

10.1 activado

Se ejecuta cuando se procesa la página.

Código de ejemplo:

<keep-alive>
  <router-view />
</keep-alive>
activated(){
  console.log("home组件被渲染")
}
复制代码

Resultado de salida:

En el código anterior, envolvemos el componente de enrutamiento con keep-alive.Cuando renderizamos el componente por primera vez, se ejecuta la función de enlace montado del componente, pero cuando seguimos cambiando de ruta, la función de enlace montado no se ejecuta. Solo se ejecuta la función de enganche activada, lo que indica que el componente no ha sido destruido.

10.2 desactivado

Se ejecuta cuando la página está oculta o cuando la página está a punto de ser reemplazada por una nueva página.

Código de ejemplo:

deactivated(){
  console.info("deactivated被执行")
}
复制代码

Resultado de salida:

Cuando nuestro componente esté a punto de ser desconectado, se ejecutará esta función de gancho, que es similar a la función de gancho beforeDestroy, pero el efecto es completamente diferente.

Resumir

Las funciones del ciclo de vida de Vue deben ser dominadas. Muchos entrevistadores a menudo sienten que es simple. No estudian mucho y no se enfocan en el proyecto. Como resultado, la entrevista es incompleta y eventualmente eliminada. Todos deben prestarle atención.

Si crees que el artículo no es agradable, puedes ver el video grabado por mi estación B: Pig Classroom