Vue Academy · 课时

onUpdated 与 onBeforeUpdate

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

响应响应式数据变化，以及避免 onUpdated 中的无限更新循环。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

响应响应式数据变化，以及避免 onUpdated 中的无限更新循环。

第 3 / 4 课13 个步骤

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

更新阶段的钩子

响应式数据发生变化时，Vue 会重新渲染组件。两个钩子分别位于更新前后：onBeforeUpdate 在 DOM 更新前触发，onUpdated 在更新后触发。

onUpdated：更新之后

当 DOM 已经更新以反映新的响应式状态后，onUpdated 就会运行。此时，渲染出的 DOM 与您的数据保持一致。

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

读取更新后的 DOM

由于更新已经完成，onUpdated 适合读取依赖最新渲染结果的新元素尺寸或位置。

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

无限循环陷阱

绝不要在 onUpdated 中修改响应式状态。这样会触发再次渲染，进而再次触发 onUpdated，然后再次修改状态——最终形成冻结应用的无限循环。

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

改用监听

如果您想响应某个特定值的变化，请使用 watch，而不是 onUpdated。监听会针对一个数据源并避免循环风险，而 onUpdated 会在每次渲染时触发。

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate：更新之前

onBeforeUpdate 在响应式数据发生变化后、Vue 更新 DOM 之前运行。此时 DOM 仍显示旧值。

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

使用场景：更新前快照

由于 onBeforeUpdate 可以看到旧 DOM，因此非常适合在变化前捕获快照——例如记录当前滚动位置，以便在更新后恢复。

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

它们会在每次渲染时触发

两个钩子都会在每个更新周期运行，而更新可能非常频繁。请让它们的回调保持轻量，以免造成性能问题。

不适合处理数据副作用

这些钩子关注的是 DOM，而不是您的数据。对于数据驱动的响应，请优先使用 computed（用于派生值）或 watch（用于响应特定数据源执行副作用）。

顺序回顾

响应式数据发生变化时，顺序如下：状态发生变化，运行 onBeforeUpdate（旧 DOM），Vue 更新 DOM，然后运行 onUpdated（新 DOM）。

如何在两者之间选择

onBeforeUpdate：捕获旧 DOM 状态，例如滚动位置或选中状态。
onUpdated：在更新后读取新 DOM，但绝不要在这里修改响应式状态。

快速检查

请测试您对更新钩子的掌握程度。

在交互式课程中回答

回顾

更新钩子总结：

onUpdated 在 DOM 更新后运行——请在这里读取新的尺寸。
绝不要在其中修改响应式状态（否则会形成无限循环）；请改用 watch。
onBeforeUpdate 在更新前运行，此时可以看到旧 DOM——非常适合捕获快照。
两个钩子都会在每次渲染时触发，因此应保持轻量。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「onUpdated 与 onBeforeUpdate」课时是免费的吗？

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

「onUpdated 与 onBeforeUpdate」这节课中我会学到什么？

响应响应式数据变化，以及避免 onUpdated 中的无限更新循环。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「onUpdated 与 onBeforeUpdate」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy