使用者痛点总览

痛点一：深层属性修改频繁导致全量重绘。痛点二：配置与实际数据混在一起，维护成本高。痛点三：缺少统一方法程序。导致“配置方法”与“数据方法”不一致，调试困难。

我们到底在折腾什么？

在可视化搭建工具里最烦人的往往是深层属性的修改。比如改一个图片的边框宽度，方法可能是 style.border.width。传统做法是把整个 style 对象读出来改完再塞回去，一不小心就把别的属性弄丢了性能也烂——整个组件树跟着重绘。

至于我们想实现。改哪个叶子，就只动那一个叶子；配置和真实数据彻底分家，各自清爽。

再看主要想法，两棵长得一样的树

整个程序里其实有两棵对象树。结构完全一致：

1. 配置树: 告诉编辑器 “这个属性长什么样”——输入框、下拉、颜色选择器？是否只读，最大值限制？联动规则等，按理说，
2. 真实值树: 存储使用者填进去的数据。没有任何多余字段，

The difference?配置树每个父子关系多了一个叫 children 的字段来连接。

举个栗子

{
"page"这方面，{
"type"的观点是，"Page","children": {
"logo"的观点是，{
"type"这方面，"Image","children": {
"src"这方面，{
"type"这方面，"AssetPicker","label": "图片地址","required": true
},"width": {
说到"type"，"NumberInput","label": "宽度","min": 0
}
}
}
}
}
}

对应的真实值树

{
至于"page"，{
“logo”这方面，{
至于“src”，"/my-logo.png",“width”: 200
}
}
}

至于方法统一。一个 key 打通两棵树

• 逻辑方法: 
• 在配置树里找: 把点换成 .children.,得到 
• 在真实值树里找: 直接用 

This means a single logical path is both unique identifier of a configuration node and its location in real value tree—no more mismatched paths.

编辑时怎么玩？注入 &

初始化时我们拿到原始配置，再读取真实值，为每个叶子节点塞两个字段：

• value: 当前值
• pathKey: 节点逻辑方法。例如 "page.logo.src"

E.g.,runtime config becomes:

{
从“page”来看，{
“children”: {
“logo”的观点是，{
“children”: {
再看“src”，{
再看“type”，“AssetPicker”,“label”: “图片地址”,“value”: "/my-logo.png","pathKey":"page.logo.src"
},…}
}
}
}
}

User changes width → set this node’s value to new number → because we know its pathKey we instantly write back: realValue.page.logo.width = newVal;

The canvas only re-renders that part;everything else stays untouched.

为什么不能直接用真实值渲染属性面板？

• You can’t tell wher a plain object is a nested component or just a styling container.
style:{width:. .} 是纯数据容器，不是组件；而 logo:{src:'..'} 则是真正子节点。
• children字段清晰地标出边界——有children的才是可递归组件；没有则是普通属性，
• This skeleton guides renderer on when to recurse,ensuring correct panel generation.
``

还有什么好玩的？

• 联动超级简单：- 在配置节点加 字段写依赖 pathKey；话说回来，一旦依赖变更就自动更新自身并写回真值链条。
• 面板渲染递归化：- 属性面板按 `configTree.children` 自动递归渲染，每个节点根据 `type` 挑选控件并绑定到 `value`；只读、必填等约束即时生效。
• 性能炸裂：- 每一次 `` 修改仅触发对应 `pathKey` 的响应；画布重绘粒度精准到单个组件属性级，大规模页面也不卡。
``

再看成一句话，双轨制方法！

Migrating two identical object trees—one carrying `children`,one holding raw values—separates editing rules from data content. Unified logical paths map directly 娱乐ween m,enabling leaf‑level edits without touching siblings and precise canvas updates.

No extra conversions,no mismatch headaches—just clean architecture where one tree talks UI。or stores state.

• Differentiation via children flag ensures proper recursion vs flat data handling.
• A shared path key gives instant two‑way mapping for fast updates.
• Simplified dependency handling keeps UI reactive and maintainable.
• Tuned rendering scope keeps performance high even on large pages.