## 一、Vue3生命周期流程 #### 1、流程图  #### 2、详细流程 ##### 初始化阶段 `beforeCreate`(选项式API) / `setup()`开始(组合式API): - 实例刚创建,响应式系统未初始化 - 无法访问`data`、`computed`、`methods` `created`(选项式API) / `setup()`结束(组合式API): - 响应式数据可用 - 可进行API请求 - 尚未挂载DOM ##### 挂载阶段 `beforeMount`/`onBeforeMount`: - 模板编译完成,生成虚拟DOM - 尚未插入真实DOM `mounted`/`onMounted`: - 组件已挂载到真实DOM - 可操作DOM元素 - 注意:子组件挂载完成不保证 ##### 更新阶段 `beforeUpdate`/`onBeforeUpdate`: - 数据变更后,虚拟DOM更新前 - 可获取更新前的DOM状态 `updated`/`onUpdated`: - 虚拟DOM重新渲染完成 - DOM已更新 - 警告:避免在此修改状态! ##### 卸载阶段 `beforeUnmount`/`onBeforeUnmount`: - 卸载前最后的清理机会 - 清除定时器/事件监听 - 取消网络请求 `unmounted`/`onUnmounted`: - 组件完全销毁 - 所有绑定和事件已移除 - 子组件均已卸载 ##### 错误处理(全周期) `errorCaptured`/`onErrorCaptured`: - 捕获后代组件的错误 - 可阻止错误向上传播 ## 二、生命周期过程演示 #### 1、示例代码 ```html Title 隐藏/显示组件 hello,num= 更新数据 点我 ``` **注意**:若在组件未挂载之前从DOM获取组件,则会返回一个`null`,只有在DOM挂载后才能获取到。 #### 2、生命周期的作用 例如有一个表格组件: 我们想在表格加载之前显示个loading图,那么我们可以在组件实例创建之前的钩子函数`setup`里面将loading图显示。 当组件实例加载出来,我们可以在`created`钩子函数里让这个loading图消失。 当表格被加载好之后我们想让它马上去拉取后台数据,那么我们可以在组件DOM挂载之前的钩子函数`beforeMount`里面去发送请求。 从后台拉取的数据要绑定在DOM中,那么就必须要在组件DOM挂载完毕的钩子函数`mounted`里面去做。 表格中的数据在更新前和更新后,我们都需要做一个处理,那么这些工作就可以放在`beforeUpdate`和`updated`中去做。 当应用程序结束后,或组件实例准备销毁时,有一些善后处理的工作(比如释放资源)就可以放在`beforeUnmount`和`unmounted`中去做。 ## 三、Vue操作DOM组件 在Vue中不建议使用JS原生操作`document.getElementById()`去获取,而是定义`ref`属性后使用`this.$refs.组件名`去获取 ```html Title 隐藏/显示组件 hello,num= 更新数据 点我 ``` **注意**:获取对象是使用`this.$refs.组件名`,若要修改对象的属性,可以使用`this.$refs.组件名.属性名 = 属性值;`来进行修改。 Loading... ## 一、Vue3生命周期流程 #### 1、流程图  #### 2、详细流程 ##### 初始化阶段 `beforeCreate`(选项式API) / `setup()`开始(组合式API): - 实例刚创建,响应式系统未初始化 - 无法访问`data`、`computed`、`methods` `created`(选项式API) / `setup()`结束(组合式API): - 响应式数据可用 - 可进行API请求 - 尚未挂载DOM ##### 挂载阶段 `beforeMount`/`onBeforeMount`: - 模板编译完成,生成虚拟DOM - 尚未插入真实DOM `mounted`/`onMounted`: - 组件已挂载到真实DOM - 可操作DOM元素 - 注意:子组件挂载完成不保证 ##### 更新阶段 `beforeUpdate`/`onBeforeUpdate`: - 数据变更后,虚拟DOM更新前 - 可获取更新前的DOM状态 `updated`/`onUpdated`: - 虚拟DOM重新渲染完成 - DOM已更新 - 警告:避免在此修改状态! ##### 卸载阶段 `beforeUnmount`/`onBeforeUnmount`: - 卸载前最后的清理机会 - 清除定时器/事件监听 - 取消网络请求 `unmounted`/`onUnmounted`: - 组件完全销毁 - 所有绑定和事件已移除 - 子组件均已卸载 ##### 错误处理(全周期) `errorCaptured`/`onErrorCaptured`: - 捕获后代组件的错误 - 可阻止错误向上传播 ## 二、生命周期过程演示 #### 1、示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <button @click="show">隐藏/显示组件</button> <mycpt v-if="isShow"></mycpt> </div> <template id="mycpt"> <div> hello,num=<span v-text="num"></span><br> 更新数据 <button @click="add" id="btn">点我</button> </div> </template> <script> const app = Vue.createApp({ data() { return { isShow: true }; }, methods: { show() { this.isShow = !this.isShow; } } }); app.component('mycpt', { template: '#mycpt', data() { return { num: 10 } }, methods: { add() { this.num++; } }, // Vue实例创建前的生命周期函数 beforeCreate() { console.log('beforeCreate'); }, // Vue实例创建后的生命周期函数 created() { const btnObj = document.getElementById('btn'); console.log(btnObj); console.log('created'); }, // Vue实例挂载DOM前的生命周期函数 beforeMount() { console.log('beforeMount'); }, // Vue实例挂载DOM后的生命周期函数 mounted() { const btnObj = document.getElementById('btn'); console.log(btnObj); console.log('mounted'); }, // Vue实例数据更新前的生命周期函数 beforeUpdate() { console.log('beforeUpdate'); }, // Vue实例数据更新后的生命周期函数 updated() { console.log('updated'); }, // Vue实例卸载前的生命周期函数 beforeUnmount() { console.log('beforeUnmount'); }, // Vue实例卸载后的生命周期函数 unmounted() { console.log('unmounted'); } }); app.mount('#app') </script> </body> </html> ``` **注意**:若在组件未挂载之前从DOM获取组件,则会返回一个`null`,只有在DOM挂载后才能获取到。 #### 2、生命周期的作用 例如有一个表格组件: 我们想在表格加载之前显示个loading图,那么我们可以在组件实例创建之前的钩子函数`setup`里面将loading图显示。 当组件实例加载出来,我们可以在`created`钩子函数里让这个loading图消失。 当表格被加载好之后我们想让它马上去拉取后台数据,那么我们可以在组件DOM挂载之前的钩子函数`beforeMount`里面去发送请求。 从后台拉取的数据要绑定在DOM中,那么就必须要在组件DOM挂载完毕的钩子函数`mounted`里面去做。 表格中的数据在更新前和更新后,我们都需要做一个处理,那么这些工作就可以放在`beforeUpdate`和`updated`中去做。 当应用程序结束后,或组件实例准备销毁时,有一些善后处理的工作(比如释放资源)就可以放在`beforeUnmount`和`unmounted`中去做。 ## 三、Vue操作DOM组件 在Vue中不建议使用JS原生操作`document.getElementById()`去获取,而是定义`ref`属性后使用`this.$refs.组件名`去获取 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <button @click="show">隐藏/显示组件</button> <mycpt v-if="isShow"></mycpt> </div> <template id="mycpt"> <div> hello,num=<span v-text="num"></span><br> 更新数据 <button @click="add" ref="btn">点我</button> </div> </template> <script> const app = Vue.createApp({ data() { return { isShow: true }; }, methods: { show() { this.isShow = !this.isShow; } } }); app.component('mycpt', { template: '#mycpt', data() { return { num: 10 } }, methods: { add() { this.num++; } }, // Vue实例创建前的生命周期函数 beforeCreate() { console.log('beforeCreate'); }, // Vue实例创建后的生命周期函数 created() { const btnObj = this.$refs.btn; console.log(btnObj); console.log('created'); }, // Vue实例挂载DOM前的生命周期函数 beforeMount() { console.log('beforeMount'); }, // Vue实例挂载DOM后的生命周期函数 mounted() { const btnObj = this.$refs.btn; btnObj.style.color = 'blue'; console.log(btnObj); console.log('mounted'); }, // Vue实例数据更新前的生命周期函数 beforeUpdate() { console.log('beforeUpdate'); }, // Vue实例数据更新后的生命周期函数 updated() { console.log('updated'); }, // Vue实例卸载前的生命周期函数 beforeUnmount() { console.log('beforeUnmount'); }, // Vue实例卸载后的生命周期函数 unmounted() { console.log('unmounted'); } }); app.mount('#app') </script> </body> </html> ``` **注意**:获取对象是使用`this.$refs.组件名`,若要修改对象的属性,可以使用`this.$refs.组件名.属性名 = 属性值;`来进行修改。 最后修改:2025 年 10 月 27 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 👆请简单粗暴地爱我。