Frontend · Low-code

A Vue3 Low-Code Form Engine That Runs Linkage on Reactivity, Not DOM Nodes

By 全栈小卷 · Aug 27, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Traditional low-code form linkage forces developers into imperative get/set node APIs that break reactivity and create maintenance debt. Moving linkage into Vue3's native reactivity chain means forms behave predictably, scale across complex multi-source dependencies, and produce schemas that AI agents can actually manipulate.

Summary

Most Vue3 low-code form builders still rely on imperative node APIs — getWidgetByName, setValue — to wire up field interactions. A new self-developed engine instead builds linkage directly on Vue3's reactivity system. Field values, visibility, and cascading rules all sit on the same reactive scope chain; changing data drives the UI without touching control nodes. Expressions map to computed properties, single-source linkage aligns with watch, and multi-source scenarios use a plugin system that injects computed-property chains watched by the engine. The result is a configuration experience that mirrors how a Vue developer writes a .vue file, eliminating common data misalignment and maintenance headaches. The approach also produces a cleaner JSON schema, which the author argues makes a better foundation for AI agents to read, write, and maintain no-code forms.

Takeaways

— The engine maps text expressions to Vue3 computed properties, with scope-aware autocomplete and support for arrow functions that destructure scope variables.

— Single-source field linkage aligns with Vue3 watch: a target field registers handlers on a source field; the engine watches once and fires all handlers in array order.

— When a source field is unmounted, its watch stops and listeners receive undefined for reset; re-mounting re-subscribes. Deleting a source field triggers full recompilation and subscription cleanup.

— Hidden target fields are removed from the active listener table; if they were the last listener on a source, that source's watch is also stopped and removed.

— Multi-source linkage uses a plugin system where an exp callback injects computed properties into the engine, and a handler runs when when conditions and exp results change — two layers of watching collaborate.

— Control styles are bound through computed-property-like expressions that output TailwindCSS classes, or by directly updating reactive field.props.status (e.g., setting error on an Ant Design Vue input).

— The data-driven approach produces a JSON schema that is more flexible and easier for AI agents to read and maintain than node-API-driven configurations.

Conclusions

The core shift is not just ergonomic — it changes what a low-code schema is. A node-API schema describes UI widgets and their imperative wiring; a data-driven schema describes reactive data relationships. The latter is a graph an AI agent can reason about, while the former is a script it must execute.

The plugin system's two-layer watching (Vue computed for exp internals, engine watcher for handler triggers) is a practical pattern for any framework that needs to compose reactive chains without leaking subscriptions or causing redundant re-computation.

The lifecycle management of watchers — pausing on unmount, re-subscribing on re-mount, bulk cleanup on source deletion — addresses the exact class of memory and stale-reference bugs that plague long-running low-code form editors.

Concepts & terms

Node-API-driven linkage

A low-code linkage model where developers call imperative methods like getWidgetByName or setValue on UI control nodes to read or write field state, rather than relying on a reactive data graph.

Data-driven linkage

A linkage model where field values, visibility, and cascading rules are declared as reactive relationships (computed properties, watchers) on a shared data scope; changing data automatically updates all dependent UI.

Scope addressing

The ability to reference fields outside the current data scope using path notation like $parent.role, $root.totalScore, or $parent.$parent.obj.remark, enabling cross-level reactive bindings.

Plugin system (multi-source linkage)

A mechanism where an exp callback registers computed properties into the engine for multi-field listening, and a handler executes when both the when condition and exp results change, combining Vue reactivity with engine-level watching.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗