Aprendizaje del ciclo de vida de Vue2
1. El ciclo de vida de Vue
El ciclo de vida en Vue se refiere a una serie de funciones de enlace que se activan durante todo el proceso de un componente, desde la creación hasta la destrucción.
Dos, el ciclo de vida en Vue2
Los enlaces de ciclo de vida en Vue2 son funciones específicas que se ejecutan en diferentes etapas de un componente. Estas funciones de enlace permiten a los desarrolladores ejecutar una lógica personalizada en diferentes etapas del ciclo de vida de los componentes.
La función de enlace del ciclo de vida en Vue2 se puede dividir en 8 etapas, en orden de ejecución:
-
beforeCreate: se llama después de la inicialización de la instancia y antes de la observación de datos y la configuración de eventos. En esta etapa, los datos y métodos del componente no se han inicializado y no se puede acceder a las propiedades y métodos de la instancia del componente.
-
created: se llama después de crear la instancia. En esta etapa, los datos y métodos del componente se han inicializado y se puede acceder a las propiedades y métodos de la instancia del componente. Pero en este momento el componente no se ha montado en el DOM.
-
beforeMount: se llama antes de que el componente se monte en el DOM. En esta etapa, el componente ha completado la compilación de la plantilla, pero la plantilla del componente no se ha convertido en el DOM real.
-
montado: se llama después de que el componente se monta en el DOM. En esta etapa, la plantilla del componente se ha renderizado en el DOM real, y se puede acceder a las operaciones DOM y los elementos DOM.
-
beforeUpdate: se llama antes de que se actualice el componente. En esta etapa, los datos del componente han cambiado, pero el DOM no se ha actualizado. La modificación y manipulación de datos se puede realizar en esta etapa.
-
actualizado: Llamado después de que el componente ha sido actualizado. En esta etapa, los datos del componente se han actualizado y el DOM se ha actualizado. Permite la manipulación del DOM y el acceso a los elementos del DOM.
-
beforeDestroy: se llama antes de que se destruya el componente. En esta etapa, la instancia del componente aún está disponible y se pueden realizar algunos trabajos de limpieza, como borrar temporizadores, cancelar la suscripción, etc.
-
destruido: se llama después de que se destruye el componente. En esta etapa, la instancia del componente se ha destruido y ya no se puede acceder a las propiedades y métodos de la instancia del componente.
Además de estas funciones de enlace de ciclo de vida de uso común, Vue2 también proporciona algunas otras funciones de enlace, como activado y desactivado, que se utilizan para manejar el cambio de caché y los estados de activación de los componentes en componentes de mantenimiento.
Al escribir la lógica en estas funciones de enlace del ciclo de vida, los desarrolladores pueden realizar operaciones personalizadas en diferentes etapas del componente, como inicializar datos, enviar solicitudes, suscribirse a eventos, manipular DOM, etc. El uso de estas funciones de enlace de ciclo de vida puede ayudar a los desarrolladores a controlar mejor el comportamiento y la interacción de los componentes.
1, antes de crear
En Vue2, beforeCreate es una función de enlace de ciclo de vida que se llama cuando se crea la instancia. En esta etapa, la observación de datos y el mecanismo de eventos de la instancia no se han inicializado, por lo que no se puede acceder a los atributos y métodos de la instancia, como datos, computados y métodos, en beforeCreate.
El siguiente es un caso para ilustrar el uso de beforeCreate:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
beforeCreate() {
console.log("beforeCreate hook");
this.message = "Hello Vue!";
},
created() {
console.log("created hook");
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que utiliza la función de gancho beforeCreate. En beforeCreate, imprimimos un mensaje y asignamos un valor a la propiedad del mensaje. Luego use el atributo de mensaje en la plantilla para mostrar el texto.
Cuando ejecutamos este componente, la consola generará "beforeCreate hook", y luego se mostrará "Hello Vue!" en la página.
Explicar código:
-
En la función de enlace beforeCreate, podemos realizar algunas operaciones de inicialización, pero en este momento los datos y métodos de la instancia no se han inicializado, por lo que no se puede acceder a atributos y métodos como datos, computados y métodos.
-
En la función de gancho creada, los datos y métodos de la instancia se han inicializado y se puede acceder a atributos y métodos como datos, computados y métodos.
Cabe señalar que la función de enlace beforeCreate se llama antes de que se cree la instancia, por lo que no se puede acceder a los elementos DOM de la instancia en esta etapa. Si necesita manipular elementos DOM, puede hacerlo en la función de gancho montado.
2. función creada
En Vue2, created es una función de enlace de ciclo de vida que se llama después de crear la instancia. En esta etapa, los mecanismos de observación de datos y eventos de la instancia se han inicializado y se puede acceder a los atributos y métodos de la instancia, como datos, computados y métodos.
El siguiente es un caso para ilustrar el uso de created:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
created() {
console.log("created hook");
this.message = "Hello Vue!";
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que utiliza la función de enlace creada. En created, imprimimos un mensaje y asignamos un valor a la propiedad del mensaje. Luego use el atributo de mensaje en la plantilla para mostrar el texto.
Cuando ejecutamos este componente, la consola mostrará "gancho creado" y luego se mostrará "Hello Vue!" en la página.
Explicar código:
- En la función de gancho creada, los datos y métodos de la instancia se han inicializado y se puede acceder a atributos y métodos como datos, computados y métodos.
- En la función de enlace creada, podemos realizar algunas operaciones de inicialización, como enviar solicitudes de red, suscribirse a eventos, etc.
- En la función de gancho creada, podemos modificar y operar las propiedades de la instancia, como asignar valores a la propiedad del mensaje.
Cabe señalar que la función de gancho creada se llama después de que se crea la instancia, por lo que se puede acceder a los elementos DOM de la instancia en esta etapa. Si necesita manipular elementos DOM, puede hacerlo en la función de gancho montado.
3, antes del montaje
En Vue2, beforeMount es una función de enlace de ciclo de vida que se llama antes de que la instancia se monte en el DOM. En esta etapa, la plantilla se ha compilado, pero la instancia aún no se ha montado en el DOM.
Aquí hay un caso para ilustrar el uso de beforeMount:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
beforeMount() {
console.log("beforeMount hook");
this.message = "Hello Vue!";
},
mounted() {
console.log("mounted hook");
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que utiliza la función de enlace beforeMount. En beforeMount, imprimimos un mensaje y asignamos un valor a la propiedad del mensaje. Luego use el atributo de mensaje en la plantilla para mostrar el texto.
Cuando ejecutamos este componente, la consola generará "beforeMount hook", y luego se mostrará "Hello Vue!" en la página.
Explicar código:
- En la función de enlace beforeMount, la plantilla se compiló, pero la instancia no se montó en el DOM, por lo que no se puede acceder a los elementos DOM de la instancia.
- En la función gancho beforeMount, podemos modificar y operar las propiedades de la instancia, como asignar valores a la propiedad del mensaje.
- En la función de enlace montado, la instancia se ha montado en el DOM y se puede acceder a los elementos DOM de la instancia.
Cabe señalar que se llama a la función de enlace beforeMount antes de que la instancia se monte en el DOM, por lo que no se puede acceder a los elementos DOM de la instancia en esta etapa. Si necesita manipular elementos DOM, puede hacerlo en la función de gancho montado.
4, montado
En Vue2,montado es una función de enlace de ciclo de vida que se llama después de que la instancia se monta en el DOM. En esta etapa, la instancia se ha montado en el DOM y se puede acceder a los elementos DOM de la instancia.
El siguiente es un caso para ilustrar el uso de montado:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log("mounted hook");
this.message = "Hello Vue!";
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que usa la función de gancho montado. En montado, imprimimos un mensaje y asignamos un valor a la propiedad del mensaje. Luego use el atributo de mensaje en la plantilla para mostrar el texto.
Cuando ejecutamos este componente, la consola generará "gancho montado" y luego se mostrará "Hello Vue!" en la página.
Explicar código:
- En la función de enlace montado, la instancia se ha montado en el DOM y se puede acceder a los elementos DOM de la instancia.
- En la función de gancho montado, podemos realizar algunas operaciones que necesitan manipular elementos DOM, como obtener el tamaño de los elementos DOM, vincular eventos, etc.
- En la función de gancho montado, podemos modificar y operar las propiedades de la instancia, como asignar valores a la propiedad del mensaje.
Cabe señalar que la función de gancho montado se llama después de que la instancia se monta en el DOM, por lo que se puede acceder a los elementos DOM de la instancia en esta etapa. Si necesita realizar algunas operaciones antes de que la instancia se monte en el DOM, puede usar la función de gancho beforeMount.
5, antes de la actualización
En Vue2, beforeUpdate es una función de enlace de ciclo de vida que se llama antes de que se actualicen los datos. En esta etapa, los datos de la instancia han cambiado, pero el DOM no se ha actualizado.
El siguiente es un caso para ilustrar el uso de beforeUpdate:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
beforeUpdate() {
console.log("beforeUpdate hook");
},
methods: {
updateMessage() {
this.message = "Updated Message";
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que utiliza la función de enlace beforeUpdate. En beforeUpdate imprimimos un mensaje. También definimos un botón que actualiza el valor del mensaje cuando se hace clic en el botón.
Cuando ejecutamos este componente, cuando se hace clic en el botón, la consola mostrará "beforeUpdate hook" y luego se mostrará "Updated Message" en la página.
Explicar código:
- En la función de enlace beforeUpdate, los datos de la instancia han cambiado, pero el DOM no se ha actualizado.
- En la función de enlace beforeUpdate, podemos realizar algunas operaciones que deben realizarse antes de que se actualicen los datos, como enviar solicitudes de red, actualizar otros datos, etc.
Cabe señalar que la función de enlace beforeUpdate se llama antes de que se actualicen los datos, por lo que no se puede acceder al DOM actualizado en esta etapa. Si necesita realizar algunas operaciones después de actualizar los datos, puede usar la función de enlace actualizada.
6, actualizado
En Vue2, updated es una función de enlace de ciclo de vida, que se llama después de que se actualizan los datos. En esta etapa, los datos de la instancia han cambiado y el DOM se ha actualizado.
Aquí hay un ejemplo para ilustrar el uso de actualizado:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
updated() {
console.log("updated hook");
},
methods: {
updateMessage() {
this.message = "Updated Message";
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que utiliza la función de enlace actualizada. En actualizado, imprimimos un mensaje. También definimos un botón que actualiza el valor del mensaje cuando se hace clic en el botón.
Cuando ejecutamos este componente, cuando se hace clic en el botón, el "Mensaje actualizado" se mostrará en la página y la consola mostrará un "gancho actualizado".
Explicar código:
- En la función de enlace actualizada, los datos de la instancia han cambiado y el DOM también se ha actualizado.
- En la función de enlace actualizada, podemos realizar algunas operaciones que deben realizarse después de actualizar los datos, como operar los elementos DOM actualizados, realizar alguna lógica adicional, etc.
Cabe señalar que la función de enlace actualizada se llama después de que se actualizan los datos, por lo que se puede acceder al DOM actualizado en esta etapa. Si necesita realizar algunas operaciones antes de que se actualicen los datos, puede utilizar la función de enlace beforeUpdate.
7, antes de destruir
En Vue2, beforeDestroy es una función de enlace de ciclo de vida que se llama antes de que se destruya la instancia. En esta etapa, la instancia todavía está completamente disponible y se puede acceder a sus propiedades y métodos.
Aquí hay un caso para ilustrar el uso de beforeDestroy:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="destroyComponent">Destroy Component</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
beforeDestroy() {
console.log("beforeDestroy hook");
},
methods: {
destroyComponent() {
this.$destroy();
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que usa la función de gancho beforeDestroy. En beforeDestroy imprimimos un mensaje. También definimos un botón que, al hacer clic, destruye el componente.
Cuando ejecutamos este componente, cuando se hace clic en el botón, la consola mostrará "beforeDestroy hook", y luego el componente se destruirá.
Explicar código:
- En la función de enlace beforeDestroy, la instancia aún está completamente disponible y se puede acceder a las propiedades y métodos de la instancia.
- En la función de enlace beforeDestroy, podemos realizar algunas operaciones que deben realizarse antes de que se destruya la instancia, como borrar el temporizador, cancelar la suscripción, etc.
Cabe señalar que se llama a la función de enlace beforeDestroy antes de que se destruya la instancia, por lo que la instancia aún está disponible en esta etapa. Si necesita realizar algunas operaciones después de que se destruya la instancia, puede usar la función de gancho destruido.
8, destruido
En Vue2, destroy es una función de enlace de ciclo de vida que se llama después de que se destruye la instancia. En esta etapa, la instancia se ha destruido por completo y ya no se puede acceder a las propiedades y métodos de la instancia.
Aquí hay un caso para ilustrar el uso de destruido:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="destroyComponent">Destroy Component</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
destroyed() {
console.log("destroyed hook");
},
methods: {
destroyComponent() {
this.$destroy();
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
En el código anterior, definimos un componente Vue, que usa la función de gancho destruido. En destruido, imprimimos un mensaje. También definimos un botón que, al hacer clic, destruye el componente.
Cuando ejecutamos este componente, cuando se hace clic en el botón, el componente se destruirá y la consola mostrará "gancho destruido".
Explicar código:
- En la función de enlace destruido, la instancia se ha destruido por completo y ya no se puede acceder a las propiedades y métodos de la instancia.
- En la función de enlace destruido, podemos realizar algunas operaciones que deben realizarse después de que se destruya la instancia, como borrar el detector de eventos global, liberar recursos, etc.
Cabe señalar que la función de gancho destruido se llama después de que se destruye la instancia, por lo que no se puede acceder a las propiedades y métodos de la instancia en esta etapa. Si necesita realizar algunas operaciones antes de que se destruya la instancia, puede usar la función de enlace beforeDestroy.
3. El ciclo de vida en vue3
El ciclo de vida de Vue 3 ha cambiado en comparación con Vue 2, principalmente para admitir mejor la API de composición. El siguiente es el ciclo de vida de Vue 3:
-
setup: se llama antes de que se cree una instancia del componente. En esta etapa, se puede realizar la inicialización de componentes, incluida la configuración de datos de respuesta, la definición de propiedades calculadas, la definición de métodos, etc.
-
beforeCreate: se llama antes de que se cree la instancia del componente. En esta etapa, se pueden realizar algunos trabajos de inicialización, pero no se puede acceder a los datos reactivos ni a las instancias de los componentes.
-
created: se llama inmediatamente después de que se crea la instancia del componente. En esta etapa, puede acceder a datos de respuesta e instancias de componentes y realizar algunas operaciones de inicialización de datos.
-
beforeMount: se llama antes de que comience el montaje del componente. En esta etapa, la plantilla se ha compilado, pero aún no se ha montado en la página.
-
montado: se llama después de montar el componente. En esta etapa, el componente se ha montado en la página y puede realizar operaciones DOM.
-
beforeUpdate: se llama antes de que se actualice el componente. En esta etapa, se pueden realizar algunas operaciones de modificación de datos.
-
actualizado: Llamado después de que el componente ha sido actualizado. En esta etapa, se pueden realizar operaciones dependientes de DOM.
-
beforeUnmount: se llama antes de que se desmonte el componente. En esta etapa, los componentes aún se pueden usar y se puede hacer algo de limpieza.
-
desmontado: se llama después de desmontar el componente. En esta etapa, las directivas del componente y los detectores de eventos se han eliminado y la instancia del componente se destruye.
A través de estas funciones de enlace del ciclo de vida, podemos realizar las operaciones correspondientes en diferentes etapas, como la inicialización de componentes en la etapa de configuración, las operaciones DOM en la etapa montada y la limpieza de recursos en la etapa beforeUnmount. Al mismo tiempo, Vue 3 también presenta una API de composición más flexible, que puede organizar y reutilizar mejor la lógica de los componentes.
1, antes del montaje
En Vue3, beforeMounthay una función de ciclo de vida de API opcional que se llama antes de que comience el montaje. En beforeMountetapa, la compilación de la plantilla está completa, pero la plantilla aún no se ha procesado en el DOM.
El siguiente es un beforeMountcaso de uso que beforeMountmuestra cómo usarlo modificando el estilo de los elementos DOM en:
<template>
<div>
<p ref="message">{
{
message }}</p>
</div>
</template>
<script setup>
import {
onBeforeMount, ref } from 'vue';
const message = ref('Hello, Vue3!');
onBeforeMount(() => {
console.log('beforeMount hook');
const messageElement = document.querySelector('#message');
messageElement.style.color = 'red';
});
</script>
<style scoped>
/* 样式 */
</style>
En el código anterior, primero importamos la función onBeforeMountde suma ref. Luego, en onBeforeMountla función, imprimimos un mensaje, document.querySelectorobtenemos <p>una referencia al elemento a través de un método y modificamos su estilo para que sea rojo.
Cuando se inicie el montaje del componente, beforeMountse llamará a la función, la consola generará "beforeMount hook" y <p>el color del texto del elemento cambiará a rojo.
Cabe señalar que beforeMountse puede acceder a los datos y métodos de la instancia del componente en la función, porque la instancia del componente se ha creado en este momento. Al mismo tiempo, beforeMountlos elementos DOM se pueden manipular directamente en la función, pero se recomienda usar los datos de respuesta de Vue para administrar el estado de DOM a fin de hacer un mejor uso de las funciones de Vue.
Resumen: beforeMountla función se llama antes de que comience el montaje y se puede usar para realizar algunas operaciones antes de la representación DOM, como modificar el estilo de los elementos DOM, agregar detectores de eventos, etc.
2, montado
En Vue3, mountedes una función opcional del ciclo de vida de la API, que se llama después de que el componente se monta en el DOM. En mountedel escenario, el componente se ha renderizado en el DOM, se puede realizar la manipulación del DOM y el acceso a los elementos del DOM.
El siguiente es un mountedcaso de uso, mountedque muestra cómo usarlo al agregar un detector de eventos en:
<template>
<div>
<button ref="button">Click me</button>
</div>
</template>
<script setup>
import {
onMounted, ref } from 'vue';
onMounted(() => {
console.log('mounted hook');
const buttonElement = document.querySelector('#button');
buttonElement.addEventListener('click', handleClick);
});
function handleClick() {
console.log('Button clicked');
}
</script>
<style scoped>
/* 样式 */
</style>
En el código anterior, usamos onMounteduna función para registrar una función de devolución de llamada que se llamará después de que el componente se monte en el DOM. En la función de devolución de llamada, imprimimos un mensaje, document.querySelectorobtenemos <button>una referencia al elemento a través del método y agregamos un oyente para el evento de clic.
Cuando el componente está montado en el DOM, mountedse llamará a la función y la consola mostrará un 'gancho montado'. Al mismo tiempo, cuando se hace clic en el botón, la consola mostrará 'Botón presionado'.
Cabe señalar que mountedse puede acceder a los datos y métodos de la instancia del componente en la función, porque el componente se ha renderizado en el DOM en este momento. Al mismo tiempo, mountedalgunas operaciones que necesitan acceder a elementos DOM se pueden realizar en la función, como agregar detectores de eventos, inicializar bibliotecas de terceros, etc.
Resumen: mountedla función se llama después de que el componente se monta en el DOM y se puede usar para realizar algunas operaciones que requieren acceso a los elementos del DOM, como agregar detectores de eventos, inicializar bibliotecas de terceros, etc.
3, antes de la actualización
En Vue3, beforeUpdatehay una función de ciclo de vida de API opcional que se llama antes de que se actualice el componente. En beforeUpdateel escenario, los datos del componente han cambiado, pero el DOM no se ha actualizado.
El siguiente es un beforeUpdatecaso de uso que beforeUpdatemuestra cómo usarlo imprimiendo los datos antes y después de la actualización:
<template>
<div>
<p>{
{
message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script setup>
import {
onBeforeUpdate, ref } from 'vue';
const message = ref('Hello, Vue3!');
onBeforeUpdate(() => {
console.log('beforeUpdate hook');
console.log('Previous message:', message.value);
});
function updateMessage() {
message.value = 'Updated message';
}
</script>
<style scoped>
/* 样式 */
</style>
En el código anterior, usamos beforeUpdatela función para registrar una función de devolución de llamada, que se llama antes de que se actualice el componente. En la función de devolución de llamada, imprimimos un mensaje y emitimos messageel valor antes de la actualización.
En la plantilla, mostramos messageel valor de y proporcionamos un botón que llamará updateMessagea una función para actualizar messageel valor cuando se haga clic en el botón.
Cuando se hace clic en el botón, updateMessagese llamará a la función y messagese cambiará el valor de. Luego, beforeUpdatese llamará a la función y la consola mostrará 'beforeUpdate hook' y 'Previous message: Hello, Vue3!', que son los messagevalores antes de la actualización.
Cabe señalar que beforeUpdatese puede acceder a los datos y métodos de la instancia del componente en la función, porque los datos del componente han cambiado en este momento. Al mismo tiempo, beforeUpdateen la función se pueden realizar algunas operaciones antes de la actualización del componente, como obtener los datos antes de la actualización, realizar algunos trabajos preparatorios, etc.
Resumen: beforeUpdatela función se llama antes de que se actualice el componente y se puede usar para realizar algunas operaciones antes de que se actualice el componente, como obtener los datos antes de la actualización, realizar algún trabajo de preparación, etc.
4, actualizado
En Vue3, updatedes una función de ciclo de vida de una API opcional, que se llama después de que se completa la actualización del componente. En el updatedescenario, los datos del componente han cambiado y el DOM se ha actualizado.
El siguiente es un updatedcaso de uso, updatedque muestra cómo usarlo imprimiendo los datos actualizados en:
<template>
<div>
<p>{
{
message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script setup>
import {
onUpdated, ref } from 'vue';
const message = ref('Hello, Vue3!');
onUpdated(() => {
console.log('updated hook');
console.log('Updated message:', message.value);
});
function updateMessage() {
message.value = 'Updated message';
}
</script>
<style scoped>
/* 样式 */
</style>
En el código anterior, usamos onUpdateduna función para registrar una función de devolución de llamada que se llamará después de que se complete la actualización del componente. En la función de devolución de llamada, imprimimos un mensaje y generamos el messagevalor actualizado.
En la plantilla, mostramos messageel valor de y proporcionamos un botón que llamará updateMessagea una función para actualizar messageel valor cuando se haga clic en el botón.
Cuando se hace clic en el botón, updateMessagese llamará a la función y messagese cambiará el valor de. Luego, onUpdatedse llamará a la función y la consola mostrará 'gancho actualizado' y 'Mensaje actualizado: Mensaje actualizado', que son los messagevalores actualizados.
Cabe señalar que onUpdatedse puede acceder a los datos y métodos de la instancia del componente en la función, porque los datos del componente han cambiado en este momento y el DOM también se ha actualizado. Al mismo tiempo, onUpdatedla función puede realizar algunas operaciones después de que se complete la actualización del componente, como obtener datos actualizados, ejecutar alguna lógica adicional, etc.
Resumen: updatedla función se llama después de que se completa la actualización del componente y se puede usar para realizar algunas operaciones después de que se completa la actualización del componente, como obtener datos actualizados, ejecutar alguna lógica adicional, etc.
5 、antes de desmontar
En Vue3, beforeUnmount es una función opcional del ciclo de vida de la API que se llama antes de desmontar el componente. En la fase beforeUnmount, el componente está a punto de eliminarse del DOM.
Aquí hay un beforeUnmountejemplo en uso, beforeUnmountque muestra cómo se puede usar realizando algunas operaciones de limpieza en:
<template>
<div>
<p>{
{
message }}</p>
<button @click="unmountComponent">Unmount Component</button>
</div>
</template>
<script setup>
import {
onBeforeUnmount, ref } from 'vue';
const message = ref('Hello, Vue3!');
onBeforeUnmount(() => {
console.log('onBeforeUnmount hook');
// 执行一些清理操作
});
function unmountComponent() {
// 卸载组件
}
</script>
<style scoped>
/* 样式 */
</style>
En el código anterior, usamos onBeforeUnmountla función para registrar una función de devolución de llamada, que se llama antes de que se desmonte el componente. En la función de devolución de llamada, imprimimos un mensaje y podemos realizar algunas operaciones de limpieza, como darse de baja, borrar temporizadores, etc.
En la plantilla, mostramos messageel valor de y proporcionamos un botón que, cuando se hace clic, llamará unmountComponenta una función para desmontar el componente.
Cuando se hace clic en el botón, unmountComponentse llamará a la función y se desmontará el componente. Luego, onBeforeUnmountse llamará a la función y la consola mostrará 'onBeforeUnmount hook', es decir, el componente está a punto de ser desmontado.
Cabe señalar que onBeforeUnmountse puede acceder a los datos y métodos de la instancia del componente en la función, porque el componente está a punto de descargarse en este momento. Al mismo tiempo, onBeforeUnmountse pueden realizar algunas operaciones de limpieza en la función antes de que se desinstale el componente, como darse de baja, borrar temporizadores, etc.
Resumen: onBeforeUnmountla función se llama antes de que se desmonte el componente y se puede usar para realizar algunas operaciones de limpieza antes de que se desmonte el componente, como cancelar la suscripción, borrar los temporizadores, etc.
6, desmontado
En Vue3, unmountedes una función de ciclo de vida de una API opcional, que se llama después de descargar el componente. En unmountedetapa, el componente ha sido eliminado del DOM.
Aquí hay un unmountedejemplo en uso, unmountedque muestra cómo se puede usar realizando algunas operaciones de limpieza en:
<template>
<div>
<p>{
{
message }}</p>
<button @click="unmountComponent">Unmount Component</button>
</div>
</template>
<script setup>
import {
onUnmounted, ref } from 'vue';
const message = ref('Hello, Vue3!');
onUnmounted(() => {
console.log('unmounted hook');
// 执行一些清理操作
});
function unmountComponent() {
// 卸载组件
}
</script>
<style scoped>
/* 样式 */
</style>
En el código anterior, usamos onUnmounteduna función para registrar una función de devolución de llamada que se llamará después de que se desmonte el componente. En la función de devolución de llamada, imprimimos un mensaje y podemos realizar algunas operaciones de limpieza, como darse de baja, borrar temporizadores, etc.
En la plantilla, mostramos messageel valor de y proporcionamos un botón que, cuando se hace clic, llamará unmountComponenta una función para desmontar el componente.
Cuando se hace clic en el botón, unmountComponentse llamará a la función y se desmontará el componente. Luego, onUnmountedse llamará a la función y la consola mostrará 'gancho desmontado', es decir, el componente ha sido desmontado.
Cabe señalar que onUnmountedse puede acceder a los datos y métodos de la instancia del componente en la función, porque el componente se ha desinstalado en este momento. Al mismo tiempo, onUnmountedla función puede realizar algunas operaciones de limpieza después de desinstalar el componente, como darse de baja, borrar temporizadores, etc.
Resumen: unmountedla función se llama después de desinstalar el componente y se puede usar para realizar algunas operaciones de limpieza después de desinstalar el componente, como cancelar la suscripción, borrar temporizadores, etc.