watch 的 flush 参数控制回调执行时机：'pre'（默认）在 DOM 更新前执行，适合清理操作；'post' 在 DOM 更新后执行，适合操作真实 DOM；'sync' 同步执行，性能差且易破坏更新优化，应避免使用。
Vue 3 中 watch 的 flush 参数用来精确控制回调函数在响应式数据变化后、DOM 更新过程中的执行时机。它不改变监听逻辑，只决定「什么时候执行你的代码」——尤其当你需要读取或操作真实 DOM 时，选错会拿到过期或未渲染的节点。
flush: 'pre'（默认值，更新前执行）
回调在组件重新渲染前、DOM 更新之前运行。此时能访问到旧的 DOM 状态，但拿不到最新渲染结果。
- 适合清理资源、取消未完成的请求、或基于旧状态做判断
- 避免在 DOM 还没更新时就去操作新内容，防止报错或无效操作
- 例如：用户快速切换搜索关键词，你可以在新 DOM 渲染前取消上一次的请求
flush: 'post'（更新后执行）
回调在组件完成重新渲染、DOM 真实更新完毕后执行。这是操作真实 DOM 最安全的时机。
- 适合获取元素尺寸、滚动位置、焦点控制、第三方库初始化（如 Chart.js）
- 等价于手动调用
nextTick，但更语义化、更可靠 - 例如：
element.value?.focus()或element.value?.getBoundingClientRect()必须用flush: 'post'
flush: 'sync'（同步执行）
数据一变，回调立刻同步执行，跳过 Vue 的异步更新队列。性能开销大，一般不推荐。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 仅用于极少数调试或特殊同步逻辑场景（比如测试中强制立即响应）
- 可能破坏批量更新优化，导致重复渲染或状态不一致
- 日常开发中基本不需要，优先考虑
pre或post
怎么写才对
直接在 watch 的 options 中传入即可：
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const inputRef = ref(null)
watch(count, () => {
inputRef.value?.focus() // 需要 DOM 已更新
}, { flush: 'post' })
</script>
注意：不要和 immediate 混淆——immediate 控制是否首次监听就执行，flush 控制每次执行的时机。
