Skip to content

Chapter 4 of 8

Computed Properties and Watchers

Computed properties are cached reactive derivations that automatically track the reactive values they read. When any of those dependencies change, the computed value is invalidated and recomputed on next access; otherwise, the cached result is returned. In the Composition API, you create one with the computed() function, and in the Options API you define them inside the computed option. Computed properties should remain pure and side-effect free, since they are evaluated lazily and may re-run at unexpected times during rendering.

The key distinction between computed properties and methods is caching. A method runs on every re-render whenever it is called from the template, while a computed property only re-evaluates when its dependencies change. This makes computed properties ideal for expensive derivations based on reactive state, while methods are better suited to event handlers and actions that intentionally produce side effects. For cases where you need to write to a computed value, Vue also supports writable computed properties by providing both a get and a set function in the object form of computed().

Watchers are the appropriate tool when you need to perform side effects in response to state changes. The Composition API provides watch() and watchEffect(). The watch() function requires you to explicitly specify the reactive sources to observe and gives you access to both the new and previous values. The watchEffect() function is more automatic: it tracks every reactive dependency accessed inside its callback and runs immediately on creation. In the Options API, watchers are defined inside the watch option, providing a similar capability with a different syntax.

All chapters
  1. 1Introduction to Vue and the Reactivity System
  2. 2Component API Styles: Options vs Composition
  3. 3Template Directives
  4. 4Computed Properties and Watchers
  5. 5Component Lifecycle, Props, and Emits
  6. 6Slots, Provide/Inject, and Advanced Features
  7. 7State Management with Pinia
  8. 8Routing with Vue Router

Drill it

Reading is not remembering. These come from the Vue Framework deck:

Q

What is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and focuses on the view layer, making it...

Q

What is the Vue reactivity system?

The Vue reactivity system automatically tracks dependencies and updates the DOM when reactive state changes. In Vue 3, it uses Proxy objects (instead of Object....

Q

How do you create a reactive object in Vue 3?

Use reactive() from the Composition API:import { reactive } from 'vue'const state = reactive({ count: 0, name: 'Vue' })This returns a deeply reactive proxy of t...

Q

What is the difference between ref() and reactive()?

ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.cons...