Reactivity in Vue.js

Reactivity is the second chapter of the free Vue.js tutorial. It explains how Vue knows when to update the screen, and how to build values and jobs on top of reactive state.

What each lesson covers:

  • Reactive State: ref() and .value, reactive() and proxies, the destructuring trap, ref vs reactive, arrays, Map and Set, nextTick() and typed state.
  • Computed Properties and Watchers: computed() and caching, writable computed, watch() with deep, immediate and once, watchEffect(), flush timing, and cancelling stale requests with onWatcherCleanup().

Reactivity is what makes Vue update the screen by itself. You declare state with ref() and reactive() inside <script setup>, learn when to use each one, and see how arrays, Map and Set stay reactive. You also learn when the screen actually updates and how to type your state in TypeScript. The second lesson adds computed() for values worked out from other state, and watch() and watchEffect() for side effects, with a simple rule for choosing between them and how to stop and clean up a watcher.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. Reactive State

    What reactivity is, <script setup> and top-level bindings, ref() and .value, unwrapping in templates, reactive() and proxies, the limits of reactive() and the destructuring problem, ref vs reactive, reactive arrays, Map and Set, DOM update timing with nextTick(), and typing state in TypeScript.

    • Explain what reactivity is and why plain variables do not update the screen
    • Create state with ref() and reactive() and know when to use each
    • Avoid the destructuring trap and replace reactive state safely
    • Wait for the DOM with nextTick() and type refs in TypeScript
  2. Computed Properties and Watchers

    computed() and caching, computed vs functions, writable computed, watch() on refs, getters, reactive objects and many sources, deep, immediate and once, watchEffect() and flush timing, stopping a watcher, onWatcherCleanup() for stale requests, and when to use computed or a watcher.

    • Derive values with computed() and explain caching
    • Run side effects with watch() and watchEffect()
    • Use deep, immediate, once and flush options
    • Stop watchers and cancel stale work with onWatcherCleanup()