Vue3 中 watch的 flush 选项(默认无/`post`/`sync`)的区别全解析

更新时间：2026年03月30日 16:47:04 作者：英俊潇洒美少年

文章介绍了Vue3中watch的flush选项,解释了三种模式（默认pre、post、sync）的工作机制和适用场景,并提供了代码示例进行对比,强调了在90%的场景下选择post模式以确保操作DOM的正确性,感兴趣的朋友跟随小编一起看看吧

一、先搞懂核心概念：flush 控制「监听回调的执行时机」

flush 是 watch 的可选配置项，决定当监听的数据变化后，回调函数什么时候执行。Vue3 中 DOM 更新是异步的，这是理解 flush 的关键前提：

Vue 会把同一轮事件循环中的所有数据变更收集起来，异步批量更新 DOM（避免频繁操作 DOM 影响性能）；
flush 就是控制 watch 回调在「DOM 更新前」「DOM 更新后」还是「同步」执行。

二、三种 flush 模式的核心区别（代码示例对比）

先定义基础模板和数据，后续只改 flush 配置：

<template>
  <!-- 绑定到 DOM 的数据 -->
  <div id="content">{{ count }}</div>
</template>
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
// 点击按钮修改 count
const add = () => {
  count.value++
  console.log('点击后立即打印：', document.getElementById('content')?.innerText)
}
</script>

1. 默认模式（不写 flush）→flush: 'pre'（Vue3 隐式默认值）

执行时机：数据变化后 → DOM 更新前 执行 watch 回调；
核心特点：回调里拿不到「更新后的 DOM」，因为 DOM 还没刷新。

代码示例：

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
// 默认 flush: 'pre'（不写就是这个）
watch(count, (newVal) => {
  console.log('watch 回调：', document.getElementById('content')?.innerText)
  console.log('新值：', newVal)
})
const add = () => {
  count.value++
  console.log('点击后立即打印：', document.getElementById('content')?.innerText)
}
</script>

执行结果（点击按钮后）：

点击后立即打印：0 // DOM 还没更
watch 回调：0 // watch 回调执行（DOM 仍未更）
[Vue 异步更新 DOM] // 此时 Vue 才更新 DOM

2. flush: ‘post’ → DOM 更新后执行

执行时机：数据变化后 → Vue 异步更新 DOM → DOM 更新完成后 执行 watch 回调；
核心特点：回调里能拿到「更新后的 DOM」，这是最常用的场景（比如监听数据后操作 DOM）。

代码示例：

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
// 显式指定 flush: 'post'
watch(count, (newVal) => {
  console.log('watch 回调：', document.getElementById('content')?.innerText)
  console.log('新值：', newVal)
}, { flush: 'post' }) // 关键配置
const add = () => {
  count.value++
  console.log('点击后立即打印：', document.getElementById('content')?.innerText)
}
</script>

执行结果（点击按钮后）：

点击后立即打印：0 // DOM 还没更
[Vue 异步更新 DOM] // Vue 先更 DOM
watch 回调：1 // watch 回调执行（能拿到更新后的 DOM）

3. flush: ‘sync’ → 同步执行

执行时机：数据变化后 → 立即同步执行 watch 回调（不等待 DOM 更新，也不等待批量更新）；
核心特点：数据变了回调就执行，同步阻塞代码，但性能差（会打破 Vue 的异步批量更新优化），尽量少用。

代码示例：

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
// 显式指定 flush: 'sync'
watch(count, (newVal) => {
  console.log('watch 回调：', document.getElementById('content')?.innerText)
  console.log('新值：', newVal)
}, { flush: 'sync' }) // 关键配置
const add = () => {
  count.value++
  console.log('点击后立即打印：', document.getElementById('content')?.innerText)
}
</script>

执行结果（点击按钮后）：

watch 回调：0 // 数据一变，回调立即执行（DOM 还没更）
点击后立即打印：0 // 后续代码执行
[Vue 异步更新 DOM] // 最后 Vue 更新 DOM

三、三种模式的适用场景（新手速记）

flush 模式	执行时机	核心用途	注意事项
默认（pre）	DOM 更新前	数据校验、提前修改数据（不依赖 DOM）	拿不到更新后的 DOM
post	DOM 更新后	操作 DOM、获取更新后的元素尺寸/位置	最常用，无性能问题
sync	数据变化同步	必须立即响应数据变化（极少场景）	性能差，打破批量更新优化

典型场景举例：

用 post 的场景（最常用）：
监听列表数据变化后，重新初始化第三方组件（比如表格、图表），需要基于更新后的 DOM 渲染：

<script setup>
import { ref, watch } from 'vue'
import ECharts from 'echarts'
const dataList = ref([1,2,3])
const chartRef = ref(null)
// 数据变化后，基于更新后的 DOM 重新渲染图表
watch(dataList, () => {
  const chart = ECharts.init(chartRef.value)
  chart.setOption({ series: [{ data: dataList.value }] })
}, { flush: 'post' }) // 必须等 DOM 更新后才能拿到 chartRef
</script>

用 sync 的场景（极少用）：
只有当你需要「数据一变，立即触发回调，且回调结果会影响后续同步代码」时才用：

<script setup>
import { ref, watch } from 'vue'
const flag = ref(false)
let result = ''
watch(flag, (newVal) => {
  result = newVal ? '开启' : '关闭'
}, { flush: 'sync' })
const test = () => {
  flag.value = true
  console.log(result) // 用 sync 会打印「开启」，默认/pre 会打印空字符串
}
</script>

用默认 pre 的场景：
数据校验（比如输入框内容长度限制），不需要依赖 DOM：

<script setup>
import { ref, watch } from 'vue'
const inputVal = ref('')
// 数据变化后，DOM 更新前校验并修正数据
watch(inputVal, (newVal) => {
  if (newVal.length > 10) {
    inputVal.value = newVal.slice(0, 10) // 截断超长内容
  }
}) // 默认 pre 即可，无需等 DOM 更新
</script>

四、进阶补充：watchPostEffect（语法糖）

Vue3 提供了 watchPostEffect，等价于 watch(..., { flush: 'post' })，写法更简洁：

<script setup>
import { ref, watchPostEffect } from 'vue'
const count = ref(0)
// 等价于 watch(count, () => {}, { flush: 'post' })
watchPostEffect(() => {
  console.log('DOM 更新后执行：', document.getElementById('content').innerText)
})
</script>

同理，watchSyncEffect 是 flush: 'sync' 的语法糖，watchEffect 是默认 pre 的语法糖。

总结

核心区别：flush 控制 watch 回调在「DOM 更新前（pre）」「DOM 更新后（post）」还是「同步（sync）」执行；
常用选择：90% 场景用 flush: 'post'（或 watchPostEffect），需要操作 DOM 必选；
性能提醒：sync 尽量不用，会失去 Vue 异步批量更新的性能优化。

到此这篇关于Vue3 中 watch的 flush 选项(默认无/`post`/`sync`)的区别全解析的文章就介绍到这了,更多相关vue watch的 flush 选项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3+vite中使用import.meta.glob的操作代码
在vue2的时候，我们一般引入多个js或者其他文件，一般使用 require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个功能用import.meta.glob来引入多个，单个的文件，下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下
2022-11-11
在Vue mounted方法中使用data变量详解
今天小编就为大家分享一篇在Vue mounted方法中使用data变量详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue实现行列转换的一种方法
这篇文章主要介绍了vue实现行列转换的一种方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
vite如何实现构建vue3新项目
这篇文章主要介绍了vite如何实现构建vue3新项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05
Vue-Element-Admin集成自己的接口实现登录跳转
关于这个Vue-element-admin中的流程可能对于新的同学不是很友好，所以本文将结合实例代码，介绍Vue-Element-Admin集成自己的接口实现登录跳转，感兴趣的小伙伴们可以参考一下
2021-06-06
浅谈Vue入门需掌握的知识
这篇文章主要介绍了浅谈Vue入门需掌握的知识，感兴趣的同学参考下
2021-04-04
vue3中的elementPlus全局组件中文转换方式
这篇文章主要介绍了vue3中的elementPlus全局组件中文转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue3中的伸缩菜单组件
这篇文章主要介绍了vue3中的伸缩菜单组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Electron实现静默打印小票的流程详解
很多情况下程序中使用的打印都是用户无感知的,并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大,本文给大家介绍了Electron实现静默打印小票的流程,感兴趣的朋友可以参考下
2024-06-06
使用vue.js在页面内组件监听scroll事件的方法
今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09