javascript / beginner
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
1
2
3
4
5
6
7
8
import { ref, computed } from 'vue';const firstName = ref('John');const lastName = ref('Doe');const fullName = computed(() => {return firstName.value + ' ' + lastName.value;});
vue
Breakdown
1
import { computed } from 'vue';
Imports the computed function used to define derived state.
2
const fullName = computed(() => { ... });
Defines a read-only reactive value that combines the first and last names.
3
return firstName.value + ' ' + lastName.value;
The logic that produces the derived value. It automatically tracks the refs used inside.