Reactivity | BestHub

Rare Earth Juejin Tech Community

Jan 17, 2025 · Frontend Development

Advanced Vue 3 Reactive APIs: shallowRef, triggerRef, customRef, shallowReactive, toRaw, markRaw, and shallowReadonly

This article explains several advanced Vue 3 reactivity APIs—including shallowRef, triggerRef, customRef, shallowReactive, toRaw, markRaw, and shallowReadonly—detailing their differences from standard refs, performance benefits, usage patterns, and providing complete TypeScript code examples for each.

FrontendPerformanceReactivity

0 likes · 11 min read

Advanced Vue 3 Reactive APIs: shallowRef, triggerRef, customRef, shallowReactive, toRaw, markRaw, and shallowReadonly

Sohu Tech Products

Nov 20, 2024 · Frontend Development

Comparison of Vue 2 and Vue 3 Reactivity: Object.defineProperty vs Proxy

Vue 2 implements reactivity by adding individual getters and setters with Object.defineProperty, which works for existing properties but struggles with many fields and dynamic changes, whereas Vue 3 uses a Proxy to intercept all operations on an object, delivering higher performance, automatic handling of added or removed properties, and greater flexibility for complex data structures.

FrontendJavaScriptObject.defineProperty

0 likes · 14 min read

Comparison of Vue 2 and Vue 3 Reactivity: Object.defineProperty vs Proxy

Rare Earth Juejin Tech Community

Aug 26, 2024 · Frontend Development

Understanding Vue2 and Vue3 Array Method Overriding and Reactivity Mechanisms

This article explains how Vue2 and Vue3 rewrite array methods to achieve reactivity, compares Object.defineProperty with Proxy, demonstrates common pitfalls such as includes and push causing infinite loops, and provides practical code examples for both versions.

Array MethodsJavaScriptObject.defineProperty

0 likes · 18 min read

Understanding Vue2 and Vue3 Array Method Overriding and Reactivity Mechanisms

Rare Earth Juejin Tech Community

Dec 31, 2023 · Frontend Development

Vue 3.4 Release: Faster Template Compiler, Refactored Reactivity, and New API Features

Vue 3.4 introduces a rewritten template compiler that doubles parsing speed, a refactored reactivity system with more precise effect triggering, stable defineModel macro, v‑bind shorthand, improved hydration error messages, and several deprecated features removed, while recommending dependency updates for a smooth upgrade.

FrontendJavaScriptReactivity

0 likes · 11 min read

Vue 3.4 Release: Faster Template Compiler, Refactored Reactivity, and New API Features

Rare Earth Juejin Tech Community

Jul 10, 2023 · Frontend Development

The Evolution and Competitive Trends of Next‑Generation Frontend Frameworks

This article analyses how modern frontend view frameworks such as Solid, Svelte, Qwik, React, Vue and Angular are converging on a solidified programming paradigm while competing through fine‑grained rendering, reactive data, developer tooling, compilation strategies and the push to reduce JavaScript for better first‑page performance.

FrameworksFrontendPerformance

0 likes · 14 min read

The Evolution and Competitive Trends of Next‑Generation Frontend Frameworks

Sohu Tech Products

Apr 12, 2023 · Frontend Development

Vue vs React: Programming Styles, View Syntax, Components, Routing, State Management, Reactivity and Lifecycle Comparison

This article provides a comprehensive technical comparison between Vue and React, covering their programming and view styles, component models, routing solutions, state‑management libraries, basic feature differences, reactivity mechanisms, lifecycle hooks and side‑effect handling, with illustrative code examples.

ComponentReactReactivity

0 likes · 15 min read

Vue vs React: Programming Styles, View Syntax, Components, Routing, State Management, Reactivity and Lifecycle Comparison

php中文网 Courses

Mar 10, 2023 · Frontend Development

Differences Between Vue 2 and Vue 3: Reactivity, Runtime, Compiler, and New Features

The article explains how Vue 3 improves upon Vue 2 by replacing Object.defineProperty with Proxy for reactivity, introducing a refined runtime renderer, a compiler that transforms templates into render functions, and new features such as the Composition API, script setup, and built‑in components like Fragment and Teleport.

Composition APIReactivityVue

0 likes · 6 min read

Differences Between Vue 2 and Vue 3: Reactivity, Runtime, Compiler, and New Features

Rare Earth Juejin Tech Community

Oct 18, 2022 · Frontend Development

Implementing Vue 3 Computed API from Scratch

This article explains how to recreate Vue 3's computed API using the composition API, covering getter/setter handling, effect integration, caching with a dirty flag, dependency tracking, and trigger mechanisms, and provides step‑by‑step code examples to build a functional ComputedRef implementation.

Composition APIFrontendJavaScript

0 likes · 10 min read

Implementing Vue 3 Computed API from Scratch

Sohu Tech Products

Feb 2, 2022 · Frontend Development

Understanding Vue 3 Reactivity: Ref Implementation, Dependency Tracking and Effect Optimization

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.

Dependency TrackingJavaScriptReactivity

0 likes · 24 min read

Understanding Vue 3 Reactivity: Ref Implementation, Dependency Tracking and Effect Optimization

php中文网 Courses

Dec 11, 2021 · Frontend Development

Implementing Vue 3 Reactivity with Proxy, Reactive, and Ref Functions

This article walks through building a Vue 3‑style reactivity system from scratch, covering effect functions, dependency collection with Set/Map/WeakMap, automatic tracking via Proxy, and the implementation of reactive and ref utilities, all illustrated with complete JavaScript code examples.

JavaScriptReactivityVue3

0 likes · 8 min read

Implementing Vue 3 Reactivity with Proxy, Reactive, and Ref Functions

Rare Earth Juejin Tech Community

Sep 22, 2021 · Frontend Development

Design Choices in Frontend Frameworks: Virtual DOM, Reactive APIs, and the Rise of SolidJS and Svelte

The article examines core design decisions in modern frontend frameworks—immutable tree‑diff versus mutable reactive models, update granularity, virtual‑DOM usage, DSL choices, and the performance trade‑offs illustrated by React, Vue, SolidJS and Svelte, while also exploring component portability via WebComponents.

FrontendReactivitySolidJS

0 likes · 10 min read

Design Choices in Frontend Frameworks: Virtual DOM, Reactive APIs, and the Rise of SolidJS and Svelte

ByteFE

May 12, 2021 · Frontend Development

Using @vue/reactivity in React: Custom Hooks and HOC for Reactive State

This article demonstrates how to leverage the @vue/reactivity package inside React by creating a custom useReactive hook for function components and a reactiveHoc higher‑order component for class components, explaining the underlying concepts, implementation steps, and practical usage with full code examples.

Custom HooksHigher-Order ComponentReactivity

0 likes · 7 min read

Using @vue/reactivity in React: Custom Hooks and HOC for Reactive State

Xueersi Online School Tech Team

Jul 3, 2020 · Frontend Development

Understanding Vue.js Dependency Collection and the Observer Pattern

This article explains how Vue.js implements its reactivity system using the observer pattern, detailing the roles of Dep and Watcher classes, the observe function, Object.defineProperty handling for objects and arrays, and providing annotated code examples to illustrate the complete dependency‑collection workflow.

Dependency CollectionFrontendObserver Pattern

0 likes · 16 min read

Understanding Vue.js Dependency Collection and the Observer Pattern

Qunar Tech Salon

Oct 9, 2019 · Frontend Development

Breaking the Framework Paradigm Debate

At a GitHub China meetup, the author reflects on Rich Harris’s critique of React, compares mutable versus immutable reactivity in Vue and React, examines functional programming foundations, and proposes a unified approach integrating mutable, immutable, and reactive patterns to transcend framework paradigm disputes.

FrontendImmutableMutable

0 likes · 9 min read

Ctrip Technology

Jul 3, 2019 · Frontend Development

Building a Standalone Vue 3 Reactivity Library: CycleJS‑like Reactive View, Immer‑like State, RxJS‑like Operators, and React‑Hooks‑like Mechanisms

This article explores Vue 3's function‑based reactivity API, demonstrates how to implement a lightweight, framework‑agnostic reactivity library with watchable objects, functional combinators, and immutable updates, and shows practical examples such as a reactive counter, a todo list, immer‑style state handling, RxJS‑style pipelines, and React‑hooks‑style utilities, while discussing the underlying concepts and limitations.

FrontendFunctional ProgrammingLibrary Design

0 likes · 12 min read

Building a Standalone Vue 3 Reactivity Library: CycleJS‑like Reactive View, Immer‑like State, RxJS‑like Operators, and React‑Hooks‑like Mechanisms

360 Tech Engineering

Aug 20, 2018 · Frontend Development

Understanding Vue's Reactivity System: Building a Simple Reactivity Engine

This article explains Vue's reactivity system by recreating a simple reactivity engine using JavaScript, covering dependency collection, watcher functions, observer classes, and Object.defineProperty to track and update values automatically when data changes.

Dependency TrackingJavaScriptObserver Pattern

0 likes · 8 min read

Understanding Vue's Reactivity System: Building a Simple Reactivity Engine

Qunar Tech Salon

Jan 5, 2018 · Frontend Development

Understanding Vue.js Data Observation, Reactivity, and Component Architecture

This article explains why Vue.js is chosen over other MVVM frameworks, details its data observer mechanism with source code examples, and demonstrates component-based architecture in a real-world project, highlighting Vue's reactivity, watcher system, and future prospects.

Observer PatternReactivityVue.js

0 likes · 14 min read

Understanding Vue.js Data Observation, Reactivity, and Component Architecture