[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:managed-tree-branch-growth-reapply":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 管理一棵树，并在每次分支编辑后重新应用它\n\n## 这个示例构建了什么\n\n这个示例构建了一棵从左到右展开的树：常规节点显示为紫色胶囊标签，每个分支末端都有一个圆形加号按钮。点击这些内联控件中的任意一个，会创建一到三个新的子节点，重新执行布局，并重新适配视口，使更新后的分支立即可见。\n\n重点并不只是通用的节点插入。组件将自己维护的嵌套树作为唯一数据源，直接修改这棵树，然后在每次编辑后把扁平化结果重新回放给 `relation-graph`。一个悬浮辅助窗口补充了说明文本、画布设置和图片导出功能，但这个示例的核心是这套受控数据的重新应用循环。\n\n## 数据是如何组织的\n\n源数据以一个内联的嵌套 `JsonNode` 树 `myTreeJsonData` 开始。像 `a`、`b`、`b1` 和 `c3` 这样的真实内容节点，与 `data.myType` 被设为 `'my-add-button'` 的占位子节点并列存在。这些占位节点并不只是视觉装饰；它们本身就是交互模型的一部分，因为它们标记了新分支的插入位置。\n\n组件把这份嵌套结构保存在 `myTreeDataRef` 中，因此应用自己拥",true,500,1782615415680]