Snippet

Computed Properties

Computed properties are values derived from other reactive data. They are cached based on their dependencies and only re-calculate when those dependencies change, making them highly efficient.

snippet.js

javascript

import { ref, computed } from 'vue';
 
const firstName = ref('John');
const lastName = ref('Doe');
 
const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value;
});

vue

Breakdown

import { computed } from 'vue';

Imports the computed function used to define derived state.

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

Defines a read-only reactive value that combines the first and last names.

return firstName.value + ' ' + lastName.value;

The logic that produces the derived value. It automatically tracks the refs used inside.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Computed Properties

Related