无需登录 数据私有 本地保存

Svelte 反应式声明查看器 - 可视化 $: 依赖链

前端 调试 Svelte 反应式 可视化 声明
18
0
0
0

Svelte 反应式声明查看器

可视化 $: 依赖链

输入 Svelte 的 $: 反应式声明，自动解析变量间的依赖关系并生成可视化依赖图。支持链式依赖追踪、循环依赖检测。

依赖关系图
外部/Props 中间变量 终端变量 循环依赖
依赖链列表
— 等待分析 —
分析洞察
— 等待分析 —
常见问题

$: 是 Svelte 中定义反应式语句的语法。当等号右侧引用的变量发生变化时，左侧的变量会自动重新计算。它类似于其他框架中的 computed 或 useMemo，但语法更简洁直观。

依赖链是指变量之间层层依赖的关系。例如 $: c = b * 2; 且 $: b = a + 1;，则 c 依赖 b，b 依赖 a，形成 a→b→c 的链。可视化依赖链有助于：①理解数据流向；②排查意外的重新计算；③检测循环依赖；④优化组件性能。

循环依赖（如 $: a = b + 1; 和 $: b = a - 1;）会导致无限循环，因为每个变量的更新都会触发另一个更新。Svelte 编译器通常会在开发模式下警告循环依赖。本工具会以红色高亮标记检测到的循环依赖节点。

对于 $: { ... } 块语句，工具会提取块内所有无 const/let/var 声明关键字的赋值（即响应式赋值），并分析其表达式中的变量引用。块内用 const 声明的局部变量会被追踪其依赖并传递到响应式变量上。

您可以：①悬停节点查看变量详情和高亮其直接依赖关系；②拖拽画布平移视图；③使用缩放按钮调整图的大小；④点击重置按钮恢复默认视图；⑤在移动端支持触控平移。
🔧 相关工具