Escrito en frente : Estoy "navegando hacia el mar", este apodo proviene de mi nombre y el nombre de mi novia. Me encanta la tecnología, el código abierto y la programación.
技术是开源的、知识是共享的.
Este blog es un pequeño resumen y registro de su aprendizaje. Si está interesado en Java y algoritmos , puede seguir mi desarrollo y estudiaremos juntos.
用知识改变命运，让我们的家人过上更好的生活.
Directorio de artículos
1. El ciclo de vida de vue
Así como los humanos tienen ciclos de vida, un programa en sí mismo y cada instancia y componente en un programa tienen un ciclo de vida.
El ciclo de vida de una persona comienza al nacer y termina con la muerte. En las décadas desde el nacimiento hasta la muerte, ocurrirán muchos eventos importantes que afectarán a algunas personas o al mundo entero.
对于一个程序或Vue.js中的一个实例来说，其生命周期开始于创建，当新建一个实例的时候，生命周期就开始了；而当销毁一个实例之后，生命周期就结束了。
Cada instancia de Vue se somete a una serie de procesos de inicialización cuando se crea; por ejemplo, debe configurar la supervisión de datos, compilar plantillas, montar la instancia en el DOM y actualizar el DOM cuando los datos cambien. Al mismo tiempo, algunas funciones llamadas ganchos de ciclo de vida se ejecutarán en este proceso, lo que brinda a los usuarios la oportunidad de agregar su propio código en diferentes etapas.
En segundo lugar, la función de gancho
Vue instancia desde la creación hasta el proceso de destrucción, estos procesos estarán acompañados por la auto-llamada de algunas funciones. Llama a estas funciones
钩子函数.
¿Por qué se llama gancho? La razón es que debe responder a un código preestablecido después de que ocurra un evento de instancia, es decir, un enlace engancha el estado o evento de una instancia.
1. El ciclo de vida de la fase de creación.
① beforeCreate
Después de que se inicializa la instancia, se llama al observador de datos y a los eventos de evento / observador antes de la configuración.
此时的 data 和 methods 中的 数据都还没有没初始化.
② created
Se llama inmediatamente después de que se crea la instancia. En este paso, la instancia ha completado la siguiente configuración: observador de datos (observador de datos), operaciones de atributos y métodos, devolución de llamada de evento de observación / evento. Es decir
此时 data 和 methods已经可以初始化完成了. Sin embargo, la fase de montaje aún no ha comenzado y el atributo $ el no está disponible actualmente. La página no ha sido renderizada.
Nota:
Si desea llamar a un método en métodos, o manipular datos en datos, solo puede operar en creado lo antes posible.
③ beforeMount
Llamado antes de que comience el monte. En este momento
页面上还看不到真实的数据, porque la plantilla se compila en la memoria, pero la plantilla no se ha procesado en la página.
Nota:
Cuando se ejecuta beforeMount, los elementos de la página no se han reemplazado realmente y se muestran algunas cadenas de plantillas escritas antes.
④ mounted
Llamado después de que se monta la instancia, en este momento el se reemplaza por el vm. $ El recién creado. En este punto el número
据已经真实渲染到页面上了.
montado es la última función del ciclo de vida durante la creación de la instancia. Cuando se ejecuta montado, significa que la instancia se ha creado por completo.
Nota:
montado no garantiza que todos los subcomponentes se monten juntos. Si desea esperar hasta que se visualice la vista completa, puede usar vm. $ NextTick montado en el interior:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
2. Ciclo de vida de la fase de operación.
① beforeUpdate
Se llama cuando se actualizan los datos, antes del parcheo del DOM virtual. En este momento
页面上数据还是旧的，但是 data 数据是最新的, la página no se ha sincronizado con los últimos datos.
Esto es adecuado para acceder al DOM existente antes de la actualización, como eliminar manualmente el detector de eventos agregado.
② updated
El DOM virtual se vuelve a procesar y parchear debido a cambios en los datos, después de lo cual se llama al gancho. En este tiempo
页面上数据已经替换成最新的.
Cuando se llama a este enlace, el DOM del componente se ha actualizado, por lo que ahora puede realizar operaciones que dependen del DOM
. Sin embargo, en la mayoría de los casos, debe evitar cambiar de estado durante este período. Si el estado correspondiente cambia, generalmente es mejor usar un atributo calculado o un observador en su lugar.
3. Ciclo de vida de la fase de destrucción.
① beforeDestroy
Llamado antes de que se destruya la instancia. En este paso, la instancia todavía está completamente disponible.
② destroyed
Llamado después de que la instancia es destruida. Después de llamar al gancho, todas las instrucciones correspondientes a la instancia de Vue se desvinculan, se eliminan todos los oyentes de eventos y también se destruyen todas las instancias secundarias.
Tres, ejemplos de código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期钩子函数</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.btn-update {
text-align: center;
color:white;
background-color: green;
font-size: 15px;
margin-top: 10px;
}
.btn-destroy {
text-align: center;
color: white;
background-color: red;
font-size: 15px
}
.btn-wrap {
margin: 10px auto;
width: 32%;
}
.str {
background-color: skyblue;
color: white;
font-size: 30px;
width: 18%;
}
</style>
</head>
<body>
<div id="app">
<div class='str'>{{msg}}</div>
<button class='btn-update' @click='update'>更新</button>
<button class='btn-destroy' @click='destroy'>销毁</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: '我是扬帆向海'
},
methods: {
update: function () {
this.msg = '我被改变了~~~';
},
destroy: function () {
this.$destroy();
}
},
beforeCreate: function () {
console.log('beforeCreate---创建前状态');
},
created: function () {
console.log('created---创建完毕状态');
},
beforeMount: function () {
console.log('beforeMount---挂载前状态');
},
mounted: function () {
console.log('mounted---挂载结束状态');
},
beforeUpdate: function () {
console.log('beforeUpdate---数据更新之前状态');
},
updated: function () {
console.log('updated---数据更新完成状态');
},
beforeDestroy: function () {
console.log('beforeDestroy---实例销毁之前状态');
},
destroyed: function () {
console.log('destroyed---实例销毁完成状态');
}
});
</script>
</body>
</html>
Durante el proceso de carga de la página, cuatro funciones de enlace en la fase de creación se ejecutan en secuencia:
La primera carga de la página activará las funciones de enlace montadas beforeCreate, created, beforeMount. El renderizado DOM ya está hecho en montado.
Diagrama de efectos del proceso de carga de la función de gancho del ciclo de vida
Debido al nivel limitado, este blog inevitablemente tendrá deficiencias, ¡los insto a que me lo hagan saber!
