Freaks City

Vue's reactivity system primarily depends on Object.defineProperty for interception alongside overridden array prototypes. While this approach effectively tracks read and write operations, it cannot detect when new properties are assigned or existing ones are removed. Limitations of Direct Assignment Standard JavaScript operations fail to trigg ...

The Vue 3 Composition API provides two primary mechanisms for managing state changes: ref and reactive. Both leverage JavaScript proxies under the hood to track mutations and trigger UI updates, yet they serve distinct structural purposes within component logic. Tracking Object State with reactive The reactive() method transforms plain JavaScri ...

This article explains the Vue reactivity system through a simplified custom implementation. It covers four core classes: Subscriber, TemplateCompiler, Dependency, and ReactiveObserver, following the publish-subscribe pattern. Core Classes Subscriber: Observes data changes and executes callbacks. TemplateCompiler: Parses the DOM, handles interp ...

Reactivity Mechanism Vue recursively traverses the object returned by data() and overrides its properties using Object.defineProperty() from ES5 to intercept read and write operations on these properties. For instance, if there's a property called username in data: const originalValue = data.username; Object.defineProperty(data, 'username', { ...

Vue's source code implements dependency collection using the Observer pattern. It involves three main classes: Dep: Acts as the observable target. Every data property has a Dep instance containing a subs queue (short for subscribers) that holds all Watcher instances depending on the data. When data changes, dep.notify() is called to inform all ...

Developers frequently encounter scenarios where an asynchronous delete operation completes successfully at the server level, yet the associated frontend data table fails to reflect these changes. This discrepancy usually points to missed refresh callbacks or improper handling of reactivity within the component setup phase. In complex setups inv ...

Enviroment Setup Vue 3 requires Node.js for development. Install the Vue CLI globally: npm install -g @vue/cli vue --version # Verify version (≥4.5.0) vue create project-name # Select "Manually select features" during setup Composition API Fundamentals Reactive State Management ref() for Primitive Values <template> <div&g ...

Vue 3 introduces distinct concepts of ref for reactivity and template refs for accessing DOM elements or component instances. ref: Reactive References ref creates reactive data references in Composition API. Basic Usage import { ref } from 'vue' const counter = ref(0) console.log(counter.value) // Output: 0 counter.value++ console.log(counter ...

Core Improvements in Vue 3 Performance Enhancements: Virtual DOM rewritten with static node skipping and dynamic node-only processing. Update performence improved by 1.3-2x, and SSR speed increased 2-3x. Tree-shaking Support: Removes unused modules during build. Based on static analysis of ES6 imports to identify and eliminate unused code. Fra ...

Basic Watch Usage For a list page that requires automatic search when users input keywords, you can use watch to monitor search value changes instead of relying solely on input change events. <template> <div> <div class="search-container"> <label>Search</label> <input v-model="qu ...