生命周期

onMounted

onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码

<script setup>
  //通过模板引用访问一个元素
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

执行顺序：先子后父

在一个 .vue 文件中，如果存在多个组件，那么它们的 onMounted 执行顺序取决于 组件渲染顺序，具体规则如下：

场景	执行顺序解释
父子组件	先子后父：子组件的 onMounted 在父组件 onMounted 之后，父组件才算完整挂载
同级组件	由父组件模板渲染顺序决定，从上到下依次执行
多个 script setup/多个组合逻辑	同一组件内多个 onMounted，按注册顺序执行

因为 Vue 认为父组件完全挂载成功的前提是：子组件也已经挂载成功。

所以生命周期顺序：子 beforeMount → 子 mounted → 父 mounted

生命周期图示