vue3.0 生命周期

最新推荐文章于 2026-04-09 11:20:28 发布

原创

最新推荐文章于 2026-04-09 11:20:28 发布 · 3.2k 阅读

本文介绍了Vue3.0组件的生命周期，包括beforeCreate、created、beforeMount/onBeforeMount、mounted/onMounted、beforeUpdate/onBeforeUpdate、updated/onUpdated、beforeUnmount/onBeforeUnmount和unmounted/onUnmounted等阶段。详细阐述了各阶段的触发时机、可用资源及注意事项，提供了一个全面的Vue3.0生命周期指南。

前言：

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。

vue3.0生命周期图例

在这里插入图片描述

1.beforeCreate

  a. beforeCreate选项式声明周期函数
  b. 在组件实例初始化之前调用（props解析已解析、data和computed等选项还未处理）
  c. 不能访问组件的实例this及其组件中的数据源和函数等
  d. 不能访问组件中的视图DOM元素
  e. 组合式 API 中的setup()钩子会在所有选项式 API 钩子之前调用

2.created

  a. created选项式生命周期函数
  b. 在组件实例化成功后调用
  c. 可访问组件的实例this及其组件中的数据源和函数等
  d. 不能访问组件中的视图DOM元素

3.beforeMount/onBeforeMount

  a. beforeMount：选项式生命周期函数、onBeforeMount：组合式生命周期钩子
  b. 组件视图在浏览器渲染之前调用
  c. 可访问组件实例东西（数据源、函数、计算属性等）
  d. 不能访问组件视图中的DOM元素

4.mounted/onMounted

  a. mounted：选项式生命周期函数、onMounted：组合式生命周期钩子
  b. 组件视图在浏览器渲染之后调用
  c. 可访问组件实例东西（数据源、函数、计算属性等）
  d. 可以访问组件视图中的DOM元素

5.beforeUpdate/onBeforeUpdate

a. beforeUpdate：选项式生命周期函数、onBeforeUpdate：组合式生命周期钩子
b. 数据源发生变化时，组件视图重新渲染之前调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 可以访问该组件中在更新之前的DOM元素，但是不能访问该组件中在更新之后的DOM元素

6.updated/onUpdated

a. updated：选项式生命周期函数、onUpdated：组合式生命周期钩子
b. 数据源发生变化时，组件视图重新渲染之后调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 不可以访问该组件中在更新之前的DOM元素，但是可以访问该组件中在更新之后的DOM元素

7.beforeUnmount/onBeforeUnmount

a. beforeUnmount：选项式生命周期函数、onBeforeUnmount：组合式生命周期钩子
b. 组件实例被卸载之前调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 可以访问组件视图中的DOM元素

8.unmounted/onUnmounted

a. unmounted：选项式生命周期函数、onUnmounted：组合式生命周期钩子
b. 组件实例被卸载之后调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 不可以访问组件视图中的DOM元素
e. 一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、DOM事件监听器或者与服务器的连接

案例：

// App.vue
<script setup>
import {
   
    ref } from 'vue';
import SonVue from './components/Son.vue'

let isShow = ref(false)
</script>

<template>
   <h3>APP 组件</h3>
   <input type="checkbox" v-model=