watch 与 watcheffect 是互补搭档：watch 负责精准响应（需旧值、控时机、判条件），如表单校验、路由重置、节流请求；watcheffect 处理自动联动（ui 同步、日志、派生计算），如预览渲染、标题更新、调试日志；协同时 watch 做决策层，watcheffect 做执行层，需避免无限循环、漏 deep、误用异步。
watch 和 watchEffect 不是互斥选项，而是互补搭档。实际项目里，它们常按职责分工：一个管“精准响应”，一个管“自动联动”，配合得当能大幅降低逻辑耦合和维护成本。
watch 负责有明确触发条件的副作用
适合需要旧值、需控制执行时机、或依赖外部状态判断是否执行的场景。
- 表单提交前校验：监听提交按钮点击状态 + 表单字段，用 oldVal 判断是否从“禁用→启用”，避免重复提交
- 路由参数变更时重置局部状态：监听 useRoute().params.id，变化时清空当前详情页的缓存数据
- 搜索关键词节流请求：监听输入 ref，配合 immediate: false（默认）+ flush: 'post'，确保 DOM 更新后再取输入框真实值
watchEffect 处理“只要变了就该更新”的轻量同步逻辑
适合 UI 状态同步、日志埋点、简单计算派生、或多个变量天然耦合的场景。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 实时预览区渲染：自动追踪 editorContent.value、theme.value、fontSize.value，任一变就重新生成预览 HTML
- 页面标题动态更新：watchEffect(() => { document.title = `${pageName.value} - ${appName}` })，无需手动列所有依赖
- 调试日志自动打印：开发环境下用 watchEffect(() => console.log('state:', { count, user, loading }))，上线时删掉整行即可
关键协同模式：watch 触发后，用 watchEffect 管理衍生状态
典型分层结构：watch 做“决策层”，watchEffect 做“执行层”。比如权限变更流程：
- 用 watch(() => currentUser.value?.role, (newRole) => { ... }) 捕获角色切换事件，做权限刷新、路由重定向等关键操作
- 再用 watchEffect(() => { showAdminPanel.value = hasPermission('admin') && currentUser.value?.isActive }) 自动同步 UI 开关——它不关心“为什么变”，只专注“现在该是什么”
避坑提醒：别让它们互相干扰
协同的前提是职责清晰。常见反模式：
- 在 watchEffect 里修改被监听的响应式数据，又没做防抖或守卫，容易引发无限循环
- 对深层对象用 watch(obj, ...) 却漏写 deep: true，导致嵌套属性变更不触发；此时更适合改用 watchEffect 或拆成多个 getter 监听
- 把本该用 watch 的异步请求逻辑硬塞进 watchEffect，结果因缺少 onInvalidate 清理未完成请求，造成内存泄漏或状态错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
