Ciclo de vida de Vue
El ciclo de vida de Vue (también conocido como función de devolución de llamada del ciclo de vida, función del ciclo de vida, gancho del ciclo de vida), se refiere a la función que vue nos ayuda a llamar algunos nombres especiales en momentos críticos.
El ciclo de vida de vue cubre todo el proceso , desde la creación de instancias de vue hasta la generación de dom virtual , el enlace de datos, el monitoreo de datos, la representación y destrucción de datos :
Fase de inicialización de la instancia de Vue
1. Antes de que se inicialice la instancia beforeCreate, se completan algunos eventos y el ciclo de vida predeterminado. En este momento, no se puede acceder a los datos en datos y los métodos en métodos.
2. La instancia creada se inicializa y ahora puede acceder a los datos en datos y a los métodos en métodos.
(En este punto, se pueden enviar solicitudes asincrónicas para generar datos puros)
Fase de montaje de la instancia de Vue
3. Antes de montar la instancia beforeMount en la plantilla, la plantilla se compila y el dominio virtual se genera y almacena en la memoria:
(1) Verifique si hay una opción el. También es posible sin la opción el. Use vm. $mount("#app") También es posible montar(2) Luego verifique si hay una opción de plantilla, si no, seleccione un html externo como plantilla para la compilación; si es así, compile la plantilla en una función de renderizado. (Es decir, si hay una opción de plantilla, usará la plantilla como plantilla para analizar, si también escribimos manualmente una función de procesamiento, usará el elemento html creado por render como plantilla para analizar)
4. La instancia montada se monta en la plantilla y se puede acceder al nodo dom en este momento.
(Las solicitudes asíncronas también se pueden enviar en este momento, principalmente para representar datos como gráficos, así como vinculación de datos)
(Los primeros cuatro ciclos de vida solo se ejecutarán una vez, mientras que beforeUpdate y updated se ejecutarán varias veces, siempre que haya un cambio en los datos, se ejecutarán).
Fase de actualización de la instancia de Vue
5. El ciclo de vida desencadenado por el cambio de datos de la instancia beforeUpdate, en este momento vuelva a compilar el elemento dom de la capa de vista correspondiente a los datos (utilice el algoritmo diff para actualizar la vista)
6. El ciclo de vida desencadenado por el cambio de datos de la instancia actualizada. En este momento, los datos ya están actualizados y la vista se ha vuelto a representar.
(La instancia de Vue se destruirá cuando cerremos el proyecto o cambiemos componentes. También podemos usar vm.$destroy() para destruir manualmente la instancia de Vue).
Fase de destrucción de instancias de Vue
7. Antes de que se destruya la instancia de beforDestroy, aún se puede acceder a la instancia de Vue en este momento
8. Después de destruir la instancia destruida, se borran los oyentes, los subcomponentes y los oyentes de eventos.Si los datos cambian en este momento, la plantilla no se volverá a compilar.
Visualización de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="app">
<!-- vue中使用ref属性来唯一标识一个html元素，相当于id -->
<div ref="container"></div>
{
{msg}}
<button @click="update">更新数据</button>
<button @click="destroy">销毁实例</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue'
},
// template: '<h1>{
{msg}}</h1>',
// render(h) {
// return h('h2', {}, this.msg)
// },
methods: {
update(){
this.msg = 'hello world!'
},
destroy(){
vm.$destroy()
}
},
// 生命周期
beforeCreate() {
console.log('beforeCreate 实例初始化之前', this.msg);
},
created() {
console.log('created 实例初始化完成 访问data和methods', this.msg);
},
beforeMount() {
console.log('beforeMount 实例挂载到页面之前', this.$refs['container']);
},
mounted() {
console.log('mounted 实例挂载到页面上 可以访问dom元素 异步请求', this.$refs['container']);
},
beforeUpdate() {
console.log('beforeUpdate 实例更新之前');
},
updated() {
console.log('updated 实例更新完毕');
},
beforeDestroy() {
console.log('beforeDestroy 实例销毁之前', this.msg);
},
destroyed() {
console.log('destroyed 实例销毁完成', this.msg);
}
});
// vm.$mount('#app')
// setTimeout(()=>{
// // vm.msg='hello world'
// // 手动销毁实例
// vm.$destroy()
// },8000)
</script>
</body>
</html>resultado de la operación: 
