We will dive into computed properties in Vue.js by walking through a simple example, identifying a common problem, and learning how computed properties can solve it. Computed properties help improve performance by avoiding unnecessary function executions during reactivity updates.
The Problem: Triggering Unnecessary Functions
Imagine we want a Vue.js application where:
• Imagine we want a Vue.js application where:
• A button toggles an “active” state and displays the current status.
• The app outputs a welcome message if the user is John or Hello Guest
Although this seems straightforward, the problem arises when functions unrelated to the updated property are triggered during reactivity updates. Let’s build this step by step and explore how to solve the issue using computed properties.
Building the Application
Step 1: Setting Up the Input and Message Display
We start with the basics:
<div id="app">
<input type="text" v-model="data.user">
<button @click="toggleActive">Change status</button>
<hr>
<div>Message: {{ message }}</div>
<div>Active: {{ isActive }}</div>
</div>
In the setup() function, we define data as a ref to hold our reactive properties and create two functions: message to evaluate the user’s input and isActive to check the status:
const data = ref({
user: "",
active: false,
});
function message() {
return data.value.user === "John" ? "Hello John" : "Hello Guest";
}
function isActive() {
return data.value.active ? "Active" : "Inactive";
}
Step 2: Toggling the Active State
To toggle the active state, we add a button and a function:
<button @click="toggleActive">Change status</button>
function toggleActive() {
data.value.active = !data.value.active;
}
Step 3: Observing the Problem
We log function triggers to the console:
console.log("message triggered");
console.log("isActive triggered");
After running the application, we observe:
• The message function triggers even when only the active state changes
• The isActive function triggers when the user types in the input field
This behavior occurs because Vue’s reactivity system updates the entire component when any property changes, causing all functions to re-evaluate.
The Solution: Using Computed Properties
Computed properties address this issue by creating dependencies. A computed property only updates when the reactive data depends on changes.
Step 1: Refactor Functions into Computed Properties
We replace the message and isActive functions with computed properties:
const message = computed(() => {
console.log("message triggered");
return data.value.user === "John" ? "Hello John" : "Hello Guest";
});
const isActive = computed(() => {
console.log("isActive triggered");
return data.value.active ? "Active" : "Inactive";
});
Step 2: Updating the Template
The template remains unchanged, as we can still use message and isActive like before:
<div>Message: {{ message }}</div>
<div>Active: {{ isActive }}</div>
Step 3: Observing the Improvement
Reloading the application and testing it reveals the benefits:
• The message computed property triggers only when the user input changes
• The isActive computed property triggers only when the active state changes
Why Computed Properties Matter
Key Benefits:
• Performance Optimization: Avoid unnecessary function calls during updates
• Declarative Dependencies: Computed properties are re-evaluated only when their dependent data changes
• Code Simplification: Makes the code cleaner and easier to understand
When to Use Computed Properties
Use computed properties when:
• You need to perform derived calculations or logic based on reactive data
• You want to optimize performance in complex applications
• You aim for cleaner and more maintainable code
Conclusion
Computed properties in Vue.js are a powerful tool to manage performance and reactivity effectively. While simple applications may not require them, they become essential in complex scenarios involving expensive operations or multiple reactive dependencies.