简述Vue 子组件和父组件执行顺序 ？

在 Vue.js 中，子组件和父组件的执行顺序主要涉及到组件的创建、挂载、更新和销毁等生命周期钩子函数。以下是这些生命周期钩子函数在父子组件之间的执行顺序：

1. 创建阶段：

   • beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件/监听的配置之前被调用。
   • created：实例创建完成后调用，此时已完成数据观测，属性和方法的运算，以及事件监听，$el 属性还没有显示出来。
   • 注意：在创建阶段，父组件先于子组件执行这些钩子。

2. 挂载阶段：

   • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时还没有开始挂载节点，$el 属性目标不会有任何变化。
   • mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果实例被挂载到一个文档内元素上，当 mounted 被调用时 vm.$el 也在文档内。
   • 注意：在挂载阶段，父组件先于子组件执行 beforeMount 和 mounted 钩子。

3. 更新阶段：

   • beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
   • updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   • 注意：在更新阶段，父组件先于子组件执行 beforeUpdate，然后子组件执行 beforeUpdate，接着父组件执行 updated，最后子组件执行 updated。

4. 销毁阶段：

   • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
   • destroyed：Vue 实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
   • 注意：在销毁阶段，父组件先于子组件执行这些钩子。

这就是 Vue.js 中父子组件的生命周期钩子函数的执行顺序。了解这个顺序对于正确地管理和控制组件的状态和行为是非常重要的。