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

vue3.0 生命周期

news 2025/9/9 19:35:49

前言：

每个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="isShow"> 是否显示子组件<hr><SonVue v-if="isShow"/>
</template>

// Son.vue
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';let age = ref(30)function showMessage() {console.log('HELLO')
}// 组件视图渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {console.log('------------------------')console.log('onBeforeMount 组件视图渲染之前（生命周期钩子）')console.log(age.value)showMessage()console.log('不能访问组件视图中的 DOM 元素');// console.log(document.getElementById('title').innerHTML)
})// 组件视图渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 可以访问组件视图中的 DOM 元素
onMounted(() => {console.log('------------------------')console.log('onMounted 组件视图渲染之后（生命周期钩子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 数据源发生变化，组件视图重新渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {console.log('------------------------')console.log('onBeforeUpdate 数据源发生变化，组件视图重新渲染之前（生命周期钩子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 数据源发生变化，组件视图重新渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {console.log('------------------------')console.log('onUpdated 数据源发生变化，组件视图重新渲染之后（生命周期钩子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 组件卸载之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {console.log('------------------------')console.log('onBeforeUnmount 组件卸载之前（生命周期钩子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
}) // 组件卸载之后
// 能访问组件实例的东西（数据源、函数等）
// 不能访问组件视图 DOM 元素
onUnmounted(() => {console.log('------------------------')console.log('onUnmounted 组件卸载之后（生命周期钩子）')console.log(age.value)showMessage()console.log('不能访问组件视图中的 DOM 元素');// console.log(document.getElementById('title').innerHTML)
}) </script><template><h3 id="title"><i>年龄：{{ age }}</i></h3><button @click="(age = 70)">年龄改成 70</button><button @click="(age = 30)">年龄改成 30</button>
</template>