Computed vs ref properties in Vue

Computed vs ref properties in Vue are used to manage reactive data. There are very similar but they serve different purposes and have distinct characteristics. Here’s a detailed comparison of computed and ref.

Table of Contents

Ref

To obtain a reference using Composition API, You need to provide a ref attribute with a name that matches the template ref attribute’s value: <template> <input ref=”input” /> </template>. You will be able to use the methods of the component directly in the script part of the code.

Definition and Purpose: ref properties are used to create reactive references to a value. They are often used to hold a single reactive value or a DOM element.
Usage: You can create a ref property using the ref function from Vue’s Composition API.
import { ref } from 'vue’;
const count = ref(0);
Reactivity: Ref is automatically reactive. When you update the .value of a ref, Vue re-renders the component if the ref is used in the template. You can directly change the .value.
Mutability: The value inside a ref is mutable. Only the ref is constant ( pointer) . You can update it directly, change the reference object:
count.value++;
Scope: Typically used within the setup function of the Composition API.

Computed

In-template expressions / references are very convenient, but they are meant for simple operations. Front should usually READ data, backend should do computing. Too much logic in templates could make them bloated and hard to understand / maintain. Computed properties are by default read only, meaning the have a getter-only approach.You can`t assign a new value to a computed property, you will receive a runtime warning. In some cases you can make a „writable” computed property, just provide a getter and a setter.

Definition and Purpose: computed properties are used to define a reactive, derived state. They automatically recompute when their dependencies change.
Usage:You can create a computed property using the computed function from Vue’s Composition API. Example:
import { ref, computed } from 'vue’;
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
Reactivity: computed properties are also reactive. They depend on other reactive sources and update automatically when those sources change.
Mutability: By default, computed properties are read-only. However, you can define a writable computed property by providing a getter and a setter. The computation will occur every time a value inside the computed proeprty will change :
const count = ref(0);
const doubleCount = computed({
get: () => count.value * 2,
set: (val) => {
count.value = val / 2;
}});
Scope : Typically used within the setup function of the Composition API.