watchEffect 通过自动追踪响应式依赖触发坐标重算：将布局逻辑封装为纯函数，输入树结构、缩放因子等响应式变量，输出节点坐标数组；用 watchEffect 包裹计算与赋值，确保数据变即更新；配合防抖、精准依赖和缓存优化性能。

`watchEffect` 本身不直接“自动更新坐标”，但它能帮你**自动触发坐标计算逻辑**——只要坐标依赖的响应式数据一变，它就立刻重算、赋值、刷新视图。关键不在“画图”，而在“谁变了就重算谁”。 下面分三块说清楚怎么用：

坐标计算逻辑必须封装成纯函数

把节点层级坐标（比如 x/y 偏移、缩放比例、父子间距）抽成一个可复用的计算函数，输入是当前树结构、选中节点、缩放因子等响应式变量，输出是每个节点的 { x, y, level } 对象数组。

例如：

• 用 treeData（ref 或 reactive 的树状结构）表示思维导图数据
• 用 scale（ref）控制整体缩放
• 用 selectedId（ref）标记高亮节点，影响布局重心偏移

这些变量一旦被 watchEffect 内部读取，就会成为自动追踪的依赖。

用 watchEffect 触发并同步更新坐标状态

在 setup 中定义一个 nodePositions = ref([]) 存坐标，然后用 watchEffect 包裹计算和赋值逻辑：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 首次挂载时立即执行一次，生成初始坐标
• 只要 treeData、scale 或 selectedId 任一变化，就重新调用布局函数、更新 nodePositions.value
• 模板里直接遍历 nodePositions 渲染 SVG 或 div 节点，自然响应式更新

注意：布局函数本身不能有副作用（如直接操作 DOM），只负责返回新坐标数组；赋值必须写在 watchEffect 体内，且要确保写入的是响应式引用（如 nodePositions.value = newPos）。

避免无效重算与性能抖动

思维导图节点多时，频繁重布局会卡顿。建议加两层控制：

• 防抖更新：对 treeData 这类高频变更（如拖拽中实时调整）加 setTimeout 或使用 useThrottleFn 封装，让 watchEffect 不被每帧触发
• 精准依赖：如果只有增删节点才需重排，而文本编辑不影响位置，那就不要在 watchEffect 里读取 node.text —— 它就不会被追踪，也不会白跑
• 缓存中间结果：比如层级深度、最大宽度等可复用的中间值，用 computed 提前算好，watchEffect 只消费它们，减少重复遍历

不复杂但容易忽略：坐标更新不是靠监听“渲染完成”或“DOM 尺寸”，而是靠监听“驱动布局的数据源”。只要数据变、watchEffect 就动，视图跟着动。