vue的生命周期以及父子组件之间的执行顺序

一、Vue 的生命周期钩子函数：

Vue 的生命周期钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。这些生命周期函数按照一定的顺序在组件的生命周期中执行。

1、beforeCreate:

• 在实例初始化之后，数据观测 (data observation) 和 event/watcher 事件配置之前被调用。
• 此时组件实例还未被创建，因此无法访问到 data、methods、computed 等属性。

2、created:

• 在实例创建完成后被立即调用。
• 在这一步，实例已经完成了数据观测，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还未开始，$el 属性目前尚不可用。

3、beforeMount:

• 在挂载开始之前被调用：相关的 render 函数首次被调用。

4、mounted:

• el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• 如果需要访问渲染后的文档，可以在这里使用 vm.$nextTick。

5、beforeUpdate:

• 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

6、updated:

• 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
• 当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。

7、beforeDestroy:

• 在实例销毁之前调用。在这一步，实例仍然完全可用。
• 适合做一些清理工作，比如解绑定时器，解绑事件等。

8、destroyed:

• 在实例销毁之后调用。
• 适合清理工作，比如清除定时器、解绑事件监听等。

二、使用场景：

• beforeCreate 和 created:
  适合执行一些初始化操作，如配置信息的获取、数据初始化等。
• beforeMount 和 mounted:
  适合执行和 DOM 相关的操作，如获取 DOM 元素、初始化第三方库等。
• beforeUpdate 和 updated:
  适合在数据更新前后执行一些逻辑，比如状态快照、动画效果等。
• beforeDestroy 和 destroyed:
  适合执行一些清理工作，如清除定时器、解绑事件监听等。

三、父子组件之间的执行顺序：

• 父组件 beforeCreate
• 父组件 created
• 父组件 beforeMount
• 子组件 beforeCreate
• 子组件 created
• 子组件 beforeMount
• 子组件 mounted
• 父组件 mounted

在父组件的 mounted 阶段，它的子组件才开始 beforeCreate、created、beforeMount、mounted 的生命周期。这是因为子组件的生命周期是在父组件挂载的时候才开始的。