Tutorials covering Vue.js from fundamentals through advanced patterns. Each chapter follows a consistent structure: intro prose, key point callout, motivation section, detailed walkthroughs with code, a complete example session, quick reference tables, best practices, common pitfalls, real-world examples, ASCII diagrams, and a summary. Topics include template syntax, attribute binding, event handling, conditional and list rendering, computed properties, watchers, component communication, slots, the Composition API, reactivity internals, lifecycle hooks, and ecosystem tooling like Vite, Vue Router, and Pinia. Every chapter uses real, verifiable code with no invented data, and each builds on the previous without cross-contaminating other framework series.
A computed property is a derived value. It reads from other reactive values and produces a new one. The template, the script, and the other computeds use it as if it were a plain value, and Vue ensures that it updates when its dependencies change. The computed() function is the Composition API’s mechanism for this….
A computed derives a value. A watcher reacts to a change. The distinction matters: the computed is for the derived state, and the watcher is for the side effect that runs when a reactive value changes. The watch() function is the Composition API’s mechanism for the side effects. It takes a source, a callback, and…
The watch() function requires the source to be named. The getter is written, the refs are listed, and the watcher knows exactly what it depends on. The watchEffect() is the opposite. It takes a function, runs it immediately, and tracks every reactive value the function reads. The dependency list is implicit, and it is derived…
A watcher reacts to a change. The default watcher reacts to the reference change: the ref’s value is replaced, or the reactive property is assigned. A nested mutation inside a reactive object does not change the reference, and the default watcher does not see it. The deep: true option makes the watcher traverse the object…
A watcher runs a side effect. The side effect may be asynchronous: a fetch that is in flight, a timer that is set, a subscription that is created. When the watched source changes before the side effect completes, the old side effect should be cancelled. The cleanup is the mechanism. The watch() and the watchEffect()…
A Vue component is not a static piece of markup. It is created, mounted into the DOM, updated when its reactive state changes, and eventually unmounted. Each of these phases is a moment when the component may need to do something: fetch data after it appears, react to a prop change, clean up a timer…
Vue’s reactivity system is automatic, and most of the time that is exactly what you want. You change a ref, and the component re-renders. You read a ref in a template, and Vue records that the component depends on it. But when a component re-renders too often, or not often enough, the automatic behavior becomes…
Props are the primary mechanism for passing data from a parent component to a child component. In Vue 3’s <script setup>, the defineProps() macro is the way to declare them. It is a compiler macro, not a function that runs at runtime. The compiler reads the declaration, generates the equivalent runtime props option, and removes…
In Vue 3.4 and earlier, destructuring props was a known footgun. The official documentation warned against it, and the ESLint plugin had a rule to catch it. The reason was simple: defineProps() returns a reactive object, and destructuring it reads the current value and stores it in a plain variable. The variable is no longer…
Props flow down from parent to child. Events flow up from child to parent. When a child component needs to tell its parent that something happened — a button was clicked, a value changed, a form was submitted — it emits an event. The parent listens for that event and reacts. This is the second…