当前位置：首页 > news >正文

vue3从精通到入门12：vue3的生命周期和组件

news 2025/8/28 0:23:50

生命周期：

生命周期钩子主要包括：

beforeCreate：组件实例被创建之前调用。在这个阶段，组件的 props 和 data 还未被初始化。
created：组件实例创建完成后调用。在这个阶段，组件的 props 和 data 已经被初始化，但 DOM 还未挂载。
beforeMount：组件的模板编译和虚拟 DOM 已经创建，但尚未挂载到真实 DOM 上。
mounted：组件已经挂载到真实 DOM 上，可以访问和操作 DOM 元素。
beforeUpdate：组件的响应式数据发生变化，但尚未重新渲染和更新 DOM。
updated：组件已经重新渲染和更新 DOM。
beforeUnmount：组件实例被销毁之前调用。在这个阶段，组件仍然完全可用。
unmounted：组件实例已经被销毁，组件的所有功能都已失效。

初始化阶段

setup：

这是 vue 3 引入的新生命周期钩子，在 beforeCreate 和 created 钩子之前调用。setup 函数接收两个参数：props 和 context（包含 attrs、slots、emit 等）。在 setup 中，你可以使用 ref 和 reactive 来创建响应式状态，并且可以直接访问组件的 props。

beforeCreate

在组件实例创建之前调用。此时，组件的 props 和 data 还未被观察和初始化。在 setup 钩子之后调用。

created

组件实例创建完成后调用。在这个阶段，组件的 props 和 data 已经被观察和初始化，但 DOM 还未挂载。可以在这里执行一些不需要 DOM 的初始化操作。

挂载阶段

beforeMount

在组件的模板编译和虚拟 DOM 已经创建，但尚未挂载到真实 DOM 上之前调用。

mounted

组件已经挂载到真实 DOM 上，可以访问和操作 DOM 元素。通常在这里执行一些初始的 DOM 操作或第三方库的初始化。

更新阶段

beforeUpdate

组件的响应式数据发生变化，但尚未重新渲染和更新 DOM 之前调用。可以在这里访问组件更新前的状态。

updated

组件已经重新渲染和更新 DOM 之后调用。当需要基于新的 DOM 状态执行操作时，可以在这里进行。

卸载阶段

beforeUnmount

组件实例被销毁之前调用。在这个阶段，组件仍然完全可用，但即将被卸载。可以在这里执行一些清理操作，如取消计时器、移除事件监听器等。

unmounted

组件实例已经被销毁，组件的所有功能都已失效。在这个阶段，无法再访问组件实例或任何其状态。

错误处理

errorCaptured

当组件或其后代组件发生错误时调用。这个钩子可以用于错误处理和报告。

注意事项

在 Vue 3 中，beforeDestroy 和 destroyed 钩子已被重命名为 beforeUnmount 和 unmounted。
setup 钩子在组件的 beforeCreate 和 created 生命周期钩子之间执行，因此它提供了一个更早的时机来设置响应式状态和执行其他初始化逻辑。
由于 setup 函数在 beforeCreate 和 created 之前调用，因此你不能在 setup 中访问 this，因为组件实例尚未创建。

<template>  <div>  <p>{{ message }}</p>  <button @click="changeMessage">Change Message</button>  </div>  
</template>  <script setup>  
import { ref, onMounted, onBeforeUnmount } from 'vue';  const message = ref('Hello, Vue 3!');  
let count = ref(0);  function changeMessage() {  message.value = `Message changed ${++count.value} times!`;  
}  onMounted(() => {  console.log('Component mounted!');  // 执行一些需要在组件挂载后执行的代码  
});  onBeforeUnmount(() => {  console.log('Component about to be unmounted!');  // 执行一些需要在组件卸载前执行的清理操作  
});  
</script>

组件：

创建组件

<template>  <div>  <p>Count: {{ count }}</p>  <button @click="increment">Increment</button>  </div>  
</template>  <script setup lang="ts">  
import { ref } from 'vue';  // 定义一个响应式引用  
const count = ref(0);  // 定义一个方法  
function increment() {  count.value++;  
}  // 可以直接将变量和方法暴露给模板  
// 它们会在模板中自动变得可用  
</script>  <style scoped>  
/* 组件样式 */  
</style>