vue生命周期加载顺序

Vue 的生命周期钩子函数可以分为 8 个阶段，按照加载顺序依次为：

1. beforeCreate：实例刚被创建，数据观测和事件机制都未初始化，无法访问 data、computed、methods 等属性和方法。
2. created：实例已经完成数据观测和事件机制的初始化，可以访问 data、computed、methods 等属性和方法，但无法访问 $el。
3. beforeMount：模板编译完成，但尚未挂载到页面上。
4. mounted：实例已经挂载到页面上，此时可以访问到 $el。
5. beforeUpdate：响应式数据更新之前调用，此时虚拟 DOM 已经完成渲染。
6. updated：响应式数据更新之后调用，此时虚拟 DOM 已经完成渲染。
7. beforeDestroy：实例销毁之前调用，此时实例仍然完全可用。
8. destroyed：实例销毁之后调用，此时实例已经不可用。

相关问题

vue中父子组件生命周期加载顺序

在Vue中，父子组件的生命周期加载顺序如下：

1. 父组件：创建阶段
- beforeCreate：实例刚被创建，数据观测（data observer）和事件机制（event watcher）都尚未初始化。
- created：实例已经完全创建，数据观测（data observer）和事件机制（event watcher）都已完成。

2. 父组件：挂载阶段
- beforeMount：模板编译/挂载之前被调用。
- mounted：模板编译/挂载完成，组件已经被创建并且在页面中渲染出来。

3. 子组件：创建阶段
- beforeCreate：实例刚被创建，数据观测（data observer）和事件机制（event watcher）都尚未初始化。
- created：实例已经完全创建，数据观测（data observer）和事件机制（event watcher）都已完成。

4. 子组件：挂载阶段
- beforeMount：模板编译/挂载之前被调用。
- mounted：模板编译/挂载完成，组件已经被创建并且在页面中渲染出来。

vue的生命周期顺序

Vue的生命周期分为八个阶段，按照顺序为：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。在beforeCreate阶段，实例已经初始化完成，但还不能使用响应式数据。在created阶段，可以访问到this，并可以调用异步的方法去获取后台的数据。在beforeMount阶段，可以访问到DOM结构，并对DOM结构进行一些增删改查的操作。在mounted阶段，DOM结构已经渲染完成并挂载在Vue实例上面了。当data发生变化时，会触发beforeUpdate和updated方法。在执行destroyed方法后，对data的改变不会再触发生命周期函数，说明此时Vue实例已经解除了事件监听以及与DOM的绑定，但是DOM结构依然存在。

对于父子组件的生命周期顺序，加载渲染过程为：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。子组件更新过程为：父beforeUpdate->子beforeUpdate->子updated->父updated。父组件更新过程为：父beforeUpdate->父updated。销毁过程为：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed。

另外，在beforeCreate阶段进行数据侦听和事件/侦听器的配置之前同步调用，此时还不能使用响应式数据。子组件的生命周期顺序为：son beforeCreate->son created->son beforeMount->son mounted->father mounted。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [理解vue生命周期以及父子组件的生命周期顺序](https://blog.csdn.net/weixin_53474595/article/details/128482218)[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%"]
- *2* *3* [Vue生命周期执行顺序(大白话)](https://blog.csdn.net/weixin_48099727/article/details/126905614)[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 ]