Vue3 onMounted 的坑：揭秘父组件与子组件的加载顺序

## Vue3 onMounted 的坑：揭秘父组件与子组件的加载顺序

Vue3 中的 `onMounted` 生命周期钩子是一个非常有用的工具，它允许我们在组件挂载完成后执行一些操作。然而，在使用 `onMounted` 时，我们可能会遇到一些坑。

### 问题：父组件比子组件更先构造完成

父组件代码：

子组件代码：

当我们运行这段代码时，我们会发现父组件的 `onMounted` 钩子会在子组件的 `onMounted` 钩子之前执行。这可能是由于父组件的构造函数比子组件的构造函数更早执行。

### 解决方案：使用 `nextTick`

为了解决这个问题，我们可以使用 `nextTick` 函数。`nextTick` 函数可以将一个函数推迟到下一次 DOM 更新循环中执行。这样，我们可以确保子组件的 `onMounted` 钩子在父组件的 `onMounted` 钩子之后执行。

父组件代码：

子组件代码：

现在，当我们运行这段代码时，我们会发现子组件的 `onMounted` 钩子会在父组件的 `onMounted` 钩子之后执行。

### 总结

在使用 Vue3 的 `onMounted` 生命周期钩子时，我们需要特别注意父组件和子组件的加载顺序。如果父组件的构造函数比子组件的构造函数更早执行，那么父组件的 `onMounted` 钩子可能会在子组件的 `onMounted` 钩子之前执行。为了解决这个问题，我们可以使用 `nextTick` 函数来推迟父组件的 `onMounted` 钩子，使其在子组件的 `onMounted` 钩子之后执行。