Vue 的父子组件生命周期钩子函数执行顺序

Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分：

第一部分：首次加载渲染 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

第二部分：父组件修改子组件的props值时： 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

第三部分：父组件修改的数据跟子组件没有关系时， 不会影响子组件 父 beforeUpdate -> 父 updated

第四部分：销毁过程 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

声命周期的哪个阶段可以调用异步请求,哪个可以操作 DOM 节点

1. 异步请求：

   • created 阶段：在 created 阶段，组件实例已经被创建，但尚未挂载到 DOM 中。你可以在这个阶段执行异步请求，例如在组件初始化时加载数据。

   • mounted 阶段：在 mounted 阶段，组件已经被挂载到 DOM 中。通常情况下，你可以在这个阶段执行异步请求，因为组件已经可见并且可以访问DOM节点。

   • updated 阶段：如果你需要在数据更新后执行异步操作，可以使用 updated 钩子。这个阶段在数据变化后，DOM 已经更新，可以执行异步请求。

2. 操作 DOM 节点：

   • mounted 阶段：在 mounted 阶段，组件已经被挂载到DOM中，这是一个操作DOM节点的理想时机。你可以在这个阶段获取DOM元素的引用，添加事件监听器等。

   • updated 阶段：在 updated 阶段，你也可以操作DOM节点，但请注意在这个阶段执行的操作可能会频繁触发，因为每次组件更新都会执行。因此，确保你的操作不会导致性能问题。