Vue：nextTick与onUpdated的区别及执行时机详解

我跟着教程学习nextTick的用法，但搞不懂它和onUpdated的区别。从文档描述来看，二者的触发原因似乎很相似。为了弄明白，我写了测试代码，结果显示nextTick的回调在onUpdated之后执行，想请人讲解下二者的区别。

官方文档描述 #

onUpdated：组件DOM更新完成后立即调用，触发时机紧跟在onBeforeUpdate之后。

nextTick：将回调延迟到下一次DOM更新周期后执行。常在修改数据后立即调用，用于等待DOM更新完成。

测试代码 #

<div>
    <button @click="handleClick">Insert/Remove</button>
    <div v-if="show" ref="content">I am an element</div>
</div>

<script setup>
import { reactive, nextTick, ref } from 'vue'
import { onBeforeMount, onMounted, onUpdated, onBeforeUpdate, onActivated, onDeactivated, onBeforeUnmount, onUnmounted } from 'vue'

const show = ref(true)
const content = ref()

const handleClick = () => {
  show.value = !show.value
  console.log(show.value, content.value)
  nextTick(() => {
    console.log(show.value, content.value)
  })
}
</script>

代码输出 #

首次点击按钮： #

onBeforeMount
onMounted
false <div>​I am an element​</div>​
onBeforeUpdate
onUpdated
false null

第二次点击按钮： #

true null
onBeforeUpdate
onUpdated
true <div>​I am an element​</div>​

二者的核心区别 #

1. 本质定位不同 #

• onUpdated是组件生命周期钩子：属于Vue组件更新流程中的固定环节，只要组件因响应式数据变化完成DOM更新，就会自动触发，不需要主动调用。
• nextTick是工具函数：必须主动调用并传入回调函数，它只会在你明确触发的时候，将回调延后到下一次DOM更新后执行。

2. 触发时机的先后 #

Vue的更新流程顺序是：
数据变化 → 触发组件更新调度 → 执行onBeforeUpdate → 更新DOM → 执行onUpdated → 执行本次更新周期中所有通过nextTick注册的回调
这就是测试代码里nextTick回调在onUpdated之后执行的原因。

3. 使用场景不同 #

• onUpdated：适合编写组件每次更新后都要执行的通用逻辑，比如每次DOM更新后重新计算元素尺寸、同步状态到第三方UI库等。
• nextTick：适合单次的、紧跟数据变化后的DOM操作场景。比如修改数据后马上要操作更新后的DOM（比如获取新渲染元素的高度、操作刚显示的DOM节点），直接操作会拿到旧的DOM状态，用nextTick就能等到DOM更新完成后再执行。

4. 触发频率不同 #

• onUpdated会在组件的每一次DOM更新时触发，包括父组件更新引发的子组件更新、组件自身数据变化引发的更新。
• nextTick的回调只会在你主动调用它的那一次，针对当前数据变化引发的DOM更新执行一次。

内容的提问来源于stack exchange，提问作者Amrmsmb