Computed Properties for Derived State

Snippet

Computed Properties for Derived State

Computed properties are functions that derive a value from other reactive sources. They are cached based on their dependencies; they only re-run when one of their reactive sources (like firstName) changes, making them more efficient than regular methods.

snippet.js
javascript
import { ref, computed } from 'vue';
 
const firstName = ref('Jane');
const lastName = ref('Doe');
 
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

vue

Breakdown

import { computed } from 'vue';

Imports the computed function for creating derived reactive state.

const fullName = computed(() => ...);

Defines a value that automatically updates whenever its dependencies change.

return `${firstName.value} ...`;

The logic that combines the two names into a single string.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Computed Properties for Derived State

Related