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搭建组件库开发环境的示例详解
这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
2022-11-11
实现vue图片缩放方式-拖拽组件
这篇文章主要介绍了实现vue图片缩放方式-拖拽组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
浅谈一下Vue生命周期中mounted和created的区别
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,那么这些过程中，具体vue做了些啥，我们今天来了解一下
2023-05-05
vue3父组件调用子组件方法的思路及实例代码
在Vue.js框架中父子组件之间的通信是常见的需求,其中父组件调用子组件的方法是实现特定功能的重要方式,这篇文章主要介绍了vue3父组件调用子组件方法的相关资料,需要的朋友可以参考下
2025-06-06
vue中echarts3.0自适应的方法
这篇文章主要介绍了vue中echarts3.0自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Vue项目安装使用moment.js方式
文章介绍了如何在Vue项目中安装和使用moment.js,包括安装步骤、导入方法、汉化设置以及在Vue实例中使用moment.js进行日期处理
2024-11-11
详解Vue3 中的watchEffect 特性
这篇文章主要介绍了Vue3 中的 watchEffect 特性详解,watchEffect 是 Vue3 中非常有用的一个特性，它可以让我们轻松地监听响应式数据的变化，并在数据发生变化时执行指定的回调函数，从而简化代码并提高应用的性能，需要的朋友可以参考下
2023-04-04
Vue实现首页banner自动轮播效果
这篇文章主要为大家详细介绍了Vue实现首页banner自动轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue 跳转页面$router.resolve和$router.push案例详解
这篇文章主要介绍了vue 跳转页面$router.resolve和$router.push案例详解,这样实现了既跳转了新页面,又不会让后端检测到页面链接不安全之类的,需要的朋友可以参考下
2023-10-10
Vue引入高德地图实现流程分步讲解
这篇文章主要介绍了Vue引入高德地图实现流程，实现步骤是通过vue的方法引入地图，初始化地图，设置宽和高，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-12-12