watch 的 once 选项用于监听器仅响应第一次变化后自动停止，适用于初始化请求、url 参数同步、临时状态埋点等场景，配合 immediate 可立即执行一次，比手动 stop() 更安全简洁。
watch 的 once 选项用于让监听器只触发一次，之后自动停止，无需手动调用 stop()。它在初始化逻辑、一次性副作用或防重复执行等场景中非常实用，尤其适合 Vue 3.4+ 项目中简化代码。
什么时候该用 once？
当你只需要响应数据的「第一次变化」，后续变更完全不关心时，once 就是最直接的解法。比如：
- 组件挂载后首次获取远程配置，且不希望配置更新时再次请求
- 表单初始化时读取 URL 参数并赋值，之后参数变动不再同步
- 监听某个临时状态（如 loading 切换为 true 的瞬间），仅需做一次埋点或动画启动
基本写法与效果
只需在 watch 选项中添加 { once: true } 即可：
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('只执行一次：', newVal)
}, { once: true })
count.value = 1 // ✅ 触发回调
count.value = 2 // ❌ 不再触发
count.value = 3 // ❌ 依然不触发
注意：该选项对 immediate: true 也生效——如果同时设置 immediate 和 once，则立即执行一次，之后不再响应任何变化。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
和手动 stop() 的区别
不用 once 时，传统做法是先调用 watch 得到返回的停止函数，再在回调里主动调用它：
- 代码更啰嗦，容易遗漏调用或重复调用
- 逻辑分散，可读性弱
- 若 watch 在异步回调中触发，还可能因作用域问题导致 stop 失效
而 once: true 是声明式控制，由 Vue 内部自动管理生命周期，更安全、简洁、不易出错。
搭配 deep 或 flush 使用没问题
once 可与其他 watch 选项共存，例如：
-
deep: 2+once: true：只监听对象前两层的首次变更 -
flush: 'post'+once: true：确保在 DOM 更新后执行一次回调 -
onCleanup仍可用：即使只执行一次，清理函数也会在监听器被移除时运行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
