This article explains Vue 3's reactive data system, detailing how ref and reactive create responsive state for primitive values and objects, demonstrates code examples, compares their return types and usage, and offers guidance on choosing the appropriate API for different scenarios.
This article explains how to use Vue 3's ref and shallowRef for reactive state, demonstrates one‑way data flow between parent and child components via props and events, and introduces a custom useRefState composable that mimics React's useState for cleaner state management.
This article explains the purpose and internal implementation of Vue 3’s ref, computed, and reactive APIs, compares their behaviours in script and template contexts, discusses watch strategies, and offers practical guidelines for choosing and modularising these reactive primitives in large‑scale frontend projects.
This article explains how to correctly use React's useRef hook with TypeScript across several real‑world scenarios, compares different initialization patterns, highlights typical mistakes with useLayoutEffect, and provides best‑practice solutions for forwarding refs, merging refs, and exposing imperative handles.
This article explains the internal implementations of Vue 3's ref and reactive APIs, compares their behavior, highlights the limitations of reactive, and demonstrates why using ref provides a more uniform, flexible, and deep‑reactive solution for frontend developers.
This article explains how React refs work with native elements, class components, and function components, demonstrates using useRef, forwardRef, and useImperativeHandle, and discusses the benefits, drawbacks, and alternative patterns for exposing component instances and DOM nodes.
The article discusses common Vue component communication patterns such as props‑emit, event buses, and ref usage, then introduces a colleague's provide‑inject plus ref approach that simplifies cross‑component interactions while highlighting its trade‑offs regarding Vue's one‑way data flow.
This article explains the fundamental differences between Vue 3's reactive and ref APIs, highlighting reactive's limitation to objects, the situations where it loses reactivity, and why using ref—along with techniques like Object.assign and toRefs—provides more reliable and flexible state management.
This article explains why fields registered with rc-form may persist and continue to run validation when using functional custom components, analyzes the internal mechanisms of getFieldMeta, clearField, and saveRef, and shows that adding forwardRef support resolves the disappearance and validation issues.
This article explains Vue 3's reactivity mechanism by dissecting the ref API, showing how dependency collection and triggering work through effect functions, and describing the bit‑mask optimization introduced in Vue 3.2 to efficiently update only stale dependencies.
This article explains Vue 3's Composition API, covering how to create reactive data with ref and reactive, use toRefs, define computed properties, apply readonly, watch and watchEffect, handle lifecycle hooks, pass props, and share state via provide and inject, all with practical code examples.
This article explores common Vue3 questions—whether to adopt the Composition API, performance impacts of mixing APIs, the absence of this in setup, differences between reactive and ref, and migration pitfalls—providing practical guidance and code examples for developers transitioning from Vue2.
This article explains how React's Strict Effects mode double‑invokes effects and layout effects during mount and unmount, and provides practical patterns using refs, cleanup functions, and focus management to ensure components behave correctly when effects run multiple times.
This article provides a comprehensive Vue 3 composition‑API tutorial covering project initialization, the setup function, reactive and ref utilities, computed properties, watch, provide/inject, template refs, and nextTick, with detailed code examples and explanations.
This article demonstrates two ways to retrieve user-entered text in a React component—by accessing the event object's target value in an onChange handler and by defining a ref to read the input value directly—along with the supporting index.js setup.
