DEV Community
Follow
How does VuReact compile Vue 3's defineModel to React?
VuReact is a toolchain for migrating from Vue to React and writing React with Vue 3 syntax. This article details how Vue 3's defineModel macro is compiled into React. The compilation maps Vue's defineModel to React's useVRef and useUpdated hooks for automatic synchronization. Vue's defineModel simplifies v-model declarations by generating a ref, a modelValue prop, and an update event. VuReact transforms this into useVRef to make prop values reactive and useUpdated to trigger parent callbacks on value changes. The compilation breaks down defineModel into prop type declarations, event callback declarations, and runtime reactivity. This ensures that mutating a ref's value within the component automatically updates the parent, mirroring the Vue development experience. VuReact supports type, default, required options, and custom prop names for defineModel. It handles these options by converting them into TypeScript type constraints and default value logic. The useVRef hook wraps the initial prop value into a reactive ref, and useUpdated monitors the ref for changes. Direct assignment to the ref's .value in the compiled React code triggers the parent's update. Functions interacting with the ref's value are wrapped in useCallback with correct dependency tracking. This preservation of the .value access pattern provides a seamless transition for developers.
