Vue Academy · 课时

onMounted 与 onBeforeMount

Q: 「onMounted 与 onBeforeMount」这节课中我会学到什么？

在 onMounted 中访问 DOM，以及为什么通常很少需要直接使用 onBeforeMount。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在 onMounted 中访问 DOM，以及为什么通常很少需要直接使用 onBeforeMount。

onMounted 与 onBeforeMount 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

挂载阶段的钩子

挂载阶段有两个钩子：onBeforeMount 在创建 DOM 之前立即触发，onMounted 在 DOM 插入后立即触发。它们看起来相似，但用途截然不同。

onMounted：DOM 已就绪

运行 onMounted 时，组件模板已经渲染并显示在页面中。模板引用指向真实元素，因此涉及 DOM 的操作应放在这里执行。

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

使用场景：初始化图表

绘制到 DOM 元素中的库需要先确保该元素存在。请在 onMounted 中传入引用的元素来初始化这些库。

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

使用场景：测量 DOM

读取尺寸、位置或滚动偏移量需要真实的 DOM。onMounted 是可以安全测量元素的最早时机。

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

使用场景：获取初始数据

组件显示时获取数据是 onMounted 的典型用途。请将结果存入引用，这样数据到达后模板就会更新。

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted 只运行一次

每个组件实例只会触发一次 onMounted。如果组件被卸载后又重新创建，新实例会运行自己的 onMounted。

onBeforeMount：插入之前

onBeforeMount 在设置逻辑运行之后、创建 DOM 之前执行。此时响应式状态已经存在，但模板引用仍然是 null，因为还没有任何内容完成渲染。

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

为什么很少需要 onBeforeMount

大多数设置工作都可以直接在 <script setup> 中完成（它本来就会在挂载前运行），而任何与 DOM 相关的操作都必须等到 onMounted。因此，onBeforeMount 的实际用途很少。

常见错误

在设置逻辑或 onBeforeMount 中尝试访问模板引用会得到 null。元素要等到挂载完成后才会存在。请始终将 DOM 访问移到 onMounted 中。

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

注册多个钩子

您可以多次调用 onMounted；所有回调都会按顺序运行。这就是组合式函数可以各自独立注册 onMounted 的原因。

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

如何在两者之间选择

onMounted：DOM 可用——适用于图表、测量、聚焦和获取数据。
onBeforeMount：渲染前的钩子，无法访问 DOM，几乎不需要使用。

快速检查

请测试您对挂载钩子的掌握程度。

回顾

挂载钩子总结：

onMounted 在 DOM 插入后运行——请将图表初始化、测量、聚焦和初始数据获取放在这里。
它每个实例只运行一次，但可以注册多次。
onBeforeMount 在渲染前运行，无法访问 DOM，而且很少需要使用。

常见问题解答

「onMounted 与 onBeforeMount」课时是免费的吗？

是的 — 「onMounted 与 onBeforeMount」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「onMounted 与 onBeforeMount」这节课中我会学到什么？

在 onMounted 中访问 DOM，以及为什么通常很少需要直接使用 onBeforeMount。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「onMounted 与 onBeforeMount」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy