生命周期钩子及父子组件 钩子执行顺序

Vue 的生命周期钩子函数指的是在组件实例化、渲染、更新和销毁等不同阶段执行的一些特定函数。下面是 Vue 组件的生命周期钩子函数及其执行顺序：

1. beforeCreate：在实例创建之前被调用。此时组件的数据和方法都还未初始化。

2. created：在实例创建完成之后被调用。此时组件的数据已经初始化，但 DOM 还未渲染。

3. beforeMount：在组件挂载到 DOM 之前被调用。此时模板已经编译完成，但还未挂载到页面中。

4. mounted：在组件挂载到 DOM 后被调用。此时组件已经被渲染并插入到页面中，可以进行 DOM 操作。

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

6. updated：在数据更新之后被调用。此时组件已经重新渲染，可以进行 DOM 操作。

7. beforeDestroy：在组件销毁之前被调用。此时组件还存在，可以进行一些清理工作。

8. destroyed：在组件销毁之后被调用。此时组件已经从 DOM 中移除，事件监听和定时器等资源都已经被销毁。

对于父子组件，它们的生命周期钩子函数的执行顺序如下：

1. 父组件的 beforeCreate 和 created 钩子函数执行。

2. 子组件的 beforeCreate 和 created 钩子函数执行。

3. 子组件的 beforeMount 钩子函数执行。

4. 子组件的 mounted 钩子函数执行。

5. 父组件的 beforeMount 钩子函数执行。

6. 父组件的 mounted 钩子函数执行。

7. 数据更新时，先执行父组件的 beforeUpdate 钩子函数，然后执行子组件的 beforeUpdate 钩子函数，再执行子组件的 updated 钩子函数，最后执行父组件的 updated 钩子函数。

8. 组件销毁时，先执行父组件的 beforeDestroy 钩子函数，然后执行子组件的 beforeDestroy 钩子函数，最后执行子组件的 destroyed 钩子函数，再执行父组件的 destroyed 钩子函数。

这是 Vue 组件生命周期钩子函数的一般执行顺序，但