El proceso de un componente desde la creación hasta la destrucción se llama ciclo de vida.
Cuando usamos la API combinada de Vue3, no hay ciclos de vida beforeCreate y created
El ciclo de vida de los componentes es el siguiente:
- onBeforeMount() se llama antes de que el DOM del componente se represente y monte realmente. En este paso, el elemento raíz aún no existe.
- onMounted() se llama después del primer renderizado del componente, el elemento ahora está disponible, lo que permite el acceso directo al DOM
- onBeforeUpdate() Se llama cuando se actualizan los datos, antes de que se parchee el DOM virtual.
- onUpdated() Después de actualizar el DOM, se llamará al método actualizado.
- onBeforeUnmount() Llamado antes de que se desmonte la instancia del componente. En esta etapa, la instancia sigue siendo completamente funcional.
- onUnmounted() Se llama después de que se desmonta la instancia del componente. Cuando se llama a este enlace, todas las directivas de la instancia del componente se desatan, se eliminan todos los detectores de eventos y se desmontan todas las instancias del componente secundario.
Ganchos de API de opciones frente a API de composición
| API opcional | API compuesta |
|---|---|
| antes de crear | Innecesario* |
| creado | Innecesario* |
| antes del monte | onBeforeMount |
| montado | en Montado |
| antes de Actualizar | onBeforeUpdate |
| actualizado | onActualizado |
| antes de desmontar | onBeforeUnmount |
| desmontado | en Desmontado |
| error capturado | onErrorCaptured |
| renderRastreado | onRenderRastreado |
| render Triggered | onRenderActivado |
| activado | activado |
| desactivado | onDesactivado |
Ejemplo de código:
<template>
<h3>我是组件</h3>
<div ref="div">{
{str}}</div>
<button @click="change">修改str</button>
</template>
<script setup lang="ts">
import {
ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
const str=ref<string>('我是大漂亮');
console.log(str);
const div=ref<HTMLDivElement>();
const change=()=>{
str.value='小可爱';
}
onBeforeMount(()=>{
console.log('创建前',div.value);
})
onMounted(()=>{
console.log('挂载完成',div.value);
})
onBeforeUpdate(()=>{
console.log('更新前')
})
onUpdated(()=>{
console.log('更新完成')
})
onBeforeUnmount(()=>{
console.log('卸载之前')
})
onUnmounted(()=>{
console.log('卸载完成')
})
</script>
<style scoped>
</style>
Carga de la página completada:
Ref<"I'm Damei">
no estaba definido antes de la creación y
se completó el montaje
<div>小可爱</div>"
Después de hacer clic en el botón:
Impresión de la consola:
antes de la actualización,
actualización completa