computed可自动同步树形控件父子节点选中状态，通过checkedStatus动态推导全选/半选/未选，并结合v-model实现受控渲染，避免手动维护与循环更新。
在树形控件中实现节点勾选逻辑时，computed 能帮你自动同步父子节点的选中状态，避免手动维护冗余数据，让代码更简洁、响应更准确。
父节点选中状态由子节点决定
当所有子节点都被勾选时，父节点应自动变为勾选；任一子节点取消勾选，父节点就变为半选或未选。利用 computed 可实时计算该状态，无需监听子节点变化后手动更新父节点：
- 在节点数据中不直接存储 isIndeterminate 或 isChecked，而是通过 computed 动态推导
- 对每个节点定义 checkedStatus 计算属性：返回 true（全选）、false（未选）、null（半选）
- 递归遍历子节点，统计已勾选数与总数，判断是否全选/全不选/部分选
子节点选中状态受父节点影响
点击父节点时，所有后代节点应联动勾选或取消。此时 computed 可结合 v-model 或 :checked 实现“受控”渲染：
- 节点模板中用 :checked="node.computedChecked"，其中 computedChecked 是基于父链路状态推导出的最终值
- 例如：若任一祖先节点未勾选，则当前节点不可勾选（或显示为禁用+未选）
- 避免直接修改子节点原始 checked 字段，改用计算属性屏蔽无效操作，保持数据单向流动
避免直接修改响应式数据引发循环
在勾选事件中，若同时更新子节点数组并触发 computed 重新求值，可能造成无限更新。关键处理方式包括：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 勾选逻辑放在 methods 中，只修改原始数据（如 node.checked = true），不主动调用 computed
- computed 仅作“读取层”，负责把原始 checked + 父子关系映射为 UI 所需的状态
- 必要时用 Vue.set 或 ref + reactive 确保新增节点也被响应式追踪
配合 watch 实现副作用（如提交选中项）
computed 本身不执行副作用，但可配合 watch 监听整个树的选中状态变化：
- 定义一个顶层 computed 属性 allCheckedKeys，递归收集所有已勾选节点 key
- 用 watch: { allCheckedKeys: { handler() { /* 提交到表单或 API */ } } } 触发业务逻辑
- 比监听每个节点事件更轻量，且天然去重、响应及时
不复杂但容易忽略：computed 的依赖必须是响应式数据，确保节点对象用 reactive 包裹，子节点列表不能是普通数组引用丢失响应性。
