Vue3学习（组合式API——生命周期函数基础）

目录

一、Vue3组合式API中的生命周期函数。

（1）各阶段生命周期涉及函数简单介绍。

<1>创建挂载阶段的生命周期函数。

<2>更新阶段的生命周期函数。

<3>卸载阶段的生命周期函数。

<4>错误处理的生命周期函数。

（2）Vue3生命周期API——选项式与组合式对比。

Vue2 选项式、Vue3 选项式/组合式的卸载阶段生命周期API对比。

（3）以Vue3组合式 onMounted 生命周期函数代码示例。

<1>beforeCreate与created。(setup)

<2>onMounted。

一、Vue3组合式API中的生命周期函数。

（1）各阶段生命周期涉及函数简单介绍。

Vue3 中组合式 API 的生命周期函数，是在组件不同阶段执行特定操作的回调函数。通过 “onXXX” 形式实现，在 setup() 内调用。

<1>创建挂载阶段的生命周期函数。

onBeforeMount：组件挂载到 DOM 前触发。可初始化非响应式数据、设置全局状态。
onMounted：组件挂载到 DOM 后触发。常用于 DOM 操作、获取数据、启动计时器等。

<2>更新阶段的生命周期函数。

onBeforeUpdate：响应式数据变化，组件更新前触发。可用于比较数据变化、执行更新前逻辑。
onUpdated：组件更新完成后触发。可进行 DOM 操作、更新 UI。

<3>卸载阶段的生命周期函数。

onBeforeUnmount：组件卸载前触发。适合做清理工作，如移除事件监听器等。
onUnmounted：组件卸载后触发。用于执行最终清理，像销毁定时器、释放资源等。

<4>错误处理的生命周期函数。

onErrorCaptured：捕获子组件运行时错误。可处理错误、给出错误提示。

（2）Vue3生命周期API——选项式与组合式对比。

选项式生命周期API 组合式生命周期API
beforeCreate/created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted

注意：Vue3中是支持选项式API的。不过一般使用组合式API。逻辑方便复用、维护。

Vue2 选项式、Vue3 选项式/组合式的卸载阶段生命周期API对比。

Vue2 选项式 API Vue3 选项式 API Vue3 组合式 API 作用场景
beforeDestroy beforeUnmount onBeforeUnmount 组件卸载前的清理工作
destroyed unmounted onUnmounted 组件卸载后的最终清理

选项式生命周期API	组合式生命周期API
beforeCreate/created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

（3）以Vue3组合式 onMounted 生命周期函数代码示例。

<1>beforeCreate与created。(setup)

代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script type="module">import { createApp, ref } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相关代码一律放在setup中const getList = () => {//模拟发请求setTimeout(() => {console.log('发送请求，获取数据List')}, 2000)}getList()return {}}}).mount('#app')</script>
</body></html>

效果。

<2>onMounted。

代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script type="module">import { createApp, ref, onMounted } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相关代码一律放在setup中const getList = () => {//模拟发请求setTimeout(() => {console.log('发送请求，获取数据List')}, 2000)}//一进入页面的请求getList()//假设某些代码需在mounted生命周期执行onMounted(() => {console.log('mounted生命周期函数')})return {}}}).mount('#app')</script>
</body></html>

效果。

生命周期函数写成函数的调用方式，可以多次进行调用。（可写不同的逻辑，不会冲突且按照先后执行）
代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script type="module">import { createApp, ref, onMounted } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相关代码一律放在setup中const getList = () => {//模拟发请求setTimeout(() => {console.log('发送请求，获取数据List')}, 2000)}//一进入页面的请求getList()//假设某些代码需在mounted生命周期执行onMounted(() => {console.log('mounted生命周期函数，逻辑1')})//写成函数的调用方式，可以调用多次。// 调用一次函数提供一个钩子，不会冲突，按照先后进行执行onMounted(() => {console.log('mounted生命周期函数，逻辑2')})return {}}}).mount('#app')</script>
</body></html>