Vue created 中函数执行顺序

在 Vue 的生命周期中，created 钩子函数是在实例创建完成后立即执行的函数。在 created 钩子中，我们可以访问到实例的数据和方法，但是在这个阶段，模板和虚拟 DOM 都还没有被渲染出来，因此无法访问到页面上的 DOM 元素。

在 Vue 实例的创建过程中，created 钩子函数的执行顺序如下：

1. beforeCreate 钩子函数执行
2. Vue 实例初始化
3. 初始化注入和校验 props
4. created 钩子函数执行
5. 如果有 el 选项，则执行挂载阶段，否则执行下一步
6. beforeMount 钩子函数执行
7. 虚拟 DOM 渲染成真实 DOM 并渲染到页面中
8. mounted 钩子函数执行

需要注意的是，如果在 created 钩子函数中需要访问 props 或者 data 中的数据，最好使用 this.$nextTick()，因为此时数据还没有被渲染到页面上，如果直接访问数据可能会出现错误。

相关问题

vue生命周期钩子函数执行顺序

Vue的生命周期钩子函数执行顺序如下：

1. beforeCreate: 在实例初始化之后，数据观测和事件配置之前被调用。此时，组件的属性和方法还未初始化。

2. created: 在实例创建完成后被立即调用。此时，组件的属性已经完成初始化，但DOM还未生成，无法访问到el选项。

3. beforeMount: 在挂载开始之前被调用。此时，模板编译已经完成，但还未将挂载的DOM替换为真实的DOM。

4. mounted: 在挂载完成后被调用。此时，组件已经被挂载到DOM上，可以访问到挂载的DOM元素。

5. beforeUpdate: 数据更新时，DOM重新渲染之前被调用。此时，组件的数据已经更新，但DOM还未重新渲染。

6. updated: 数据更新且DOM重新渲染完成后被调用。此时，组件的数据已经更新，并且DOM已经重新渲染。

7. beforeDestroy: 在实例销毁之前被调用。此时，组件还未被销毁，仍然可以访问到组件的数据和方法。

8. destroyed: 在实例销毁之后被调用。此时，组件已经被销毁，无法再访问到组件的数据和方法。

需要注意的是，父组件和子组件的生命周期钩子函数执行顺序是先父后子。也就是说，父组件的钩子函数会在子组件的钩子函数之前被调用。例如，父组件的created钩子函数会在子组件的created钩子函数之前被调用。这样可以确保父组件在子组件之前完成一些初始化的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue常见面试题：Vue的生命周期以及父子组件钩子函数的执行顺序？（超详细）](https://blog.csdn.net/weixin_53934815/article/details/129092938)[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钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序](https://blog.csdn.net/m0_57262819/article/details/124653331)[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 ]

vue2和vue3的钩子函数执行顺序

Vue2和Vue3的钩子函数执行顺序有一些不同，下面是它们的执行顺序：

Vue2的钩子函数执行顺序：
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

Vue3的钩子函数执行顺序：
1. beforeCreate
2. created
3. onBeforeMount
4. onMounted
5. onBeforeUpdate
6. onUpdated
7. onBeforeUnmount
8. onUnmounted

可以看到，Vue3增加了两个新的钩子函数，分别是`onBeforeUnmount`和`onUnmounted`，用来替代Vue2中的`beforeDestroy`和`destroyed`。同时，Vue3将`beforeMount`和`mounted`拆分成了两个独立的钩子函数。