动态计算 (Math Process)

这个示例展示了 Flow 的核心优势之一：它与 Vue 响应式生态系统的无缝集成。

不像许多图表库依赖于黑盒的 Canvas 渲染周期，Flow 节点本质上是由原生 HTML/Vue 组件驱动的作用域插槽容器。这意味着您的自定义节点拥有所有的“Vue 魔法”——状态管理、双向绑定和基于组件的逻辑流程自动生效。

计算演示

尝试拖动左侧“数值”节点中的滑块。观察右侧的“结果”节点如何像标准的 Vue 计算周期一样即时更新。

输入 A

输入 B

op-1

res-1

响应式逻辑连线

机制解析

因为 #node 插槽内的内容是您的 Vue 上下文中的标准组件：

1. 响应式：任何绑定（例如 v-model="store[node.id]"）都能完美工作，无需中间的事件派发器。
2. 状态解耦：您可以在 Pinia 或本地响应式对象中管理您的业务逻辑，将 Flow 纯粹作为一个视图层。

核心节点属性

属性	类型	说明
Node.type	string	自定义标识符。如果类型不是内置类型之一（input、output、default），组件将回退到使用您的自定义插槽逻辑。
Node.width	number	自定义元素的静态宽度。用于虚拟化和碰撞检测数学计算。
Node.height	number	自定义元素的静态高度。