vue3生命周期钩子
时间: 2023-09-03 17:15:56 浏览: 50
在Vue 3中,生命周期钩子函数有一些变化。下面是Vue 3中常用的几个生命周期钩子函数:
1. beforeCreate:在实例创建之前被调用。此时,实例的属性和方法都还没有被初始化。
2. created:在实例创建完成之后被调用。此时,实例的属性和方法已经被初始化,但DOM还未挂载。
3. beforeMount:在实例挂载之前被调用。此时,模板编译完成,但还未将模板渲染成真实的DOM。
4. mounted:在实例挂载完成之后被调用。此时,模板已经被渲染成真实的DOM,并且可以访问到DOM元素。
5. beforeUpdate:在组件更新之前被调用。此时,组件的数据已经发生了变化,但尚未重新渲染DOM。
6. updated:在组件更新完成之后被调用。此时,组件的数据已经变化并且DOM已经更新。
7. beforeUnmount:在组件卸载之前被调用。此时,组件即将从DOM中被移除。
8. unmounted:在组件卸载完成之后被调用。此时,组件已经从DOM中移除,不再被使用。
需要注意的是,Vue 3中废弃了一些旧的生命周期钩子函数,如beforeDestroy和destroyed,取而代之的是beforeUnmount和unmounted。这是因为Vue 3引入了组合式API,为了统一生命周期函数的命名和行为。
这些生命周期钩子函数可以让我们在不同的阶段执行一些逻辑操作,比如初始化数据、发送网络请求、订阅事件等。通过合理使用生命周期钩子函数,我们可以更好地控制组件的生命周期和行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3 -- 生命周期函数(钩子)](https://blog.csdn.net/m0_47901007/article/details/118498206)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue 3.0 生命周期/钩子函数](https://blog.csdn.net/m0_51691013/article/details/118536879)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]