0Pricing
Vue Academy · Lesson

Computed and Watch in Composition API

computed() for derived state, watch() and watchEffect() for side effects.

Deriving and Reacting to State

Reactive state is only half the story. You also need to derive new values from it and react to changes. The Composition API offers computed, watch, and watchEffect for this.

computed for Derived Values

computed() takes a getter function and returns a ref whose value is derived from other reactive state. Access it with .value in JS, unwrapped in the template.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

All lessons in this course

  1. Why Composition API?
  2. setup() Function and Reactive Variables
  3. ref vs reactive: When to Use Each
  4. Computed and Watch in Composition API
← Back to Vue Academy