目录
一、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 组件卸载后的最终清理
（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>
- 效果。
