Computed vs method performance in Vue - Hands-On Comparison

Computed vs Method Performance in Vue

📖 Scenario: You are building a simple Vue 3 app that shows a list of numbers and their doubled values. You want to learn the difference between using a computed property and a method to double the numbers.

🎯 Goal: Create a Vue 3 component that displays doubled numbers using both a computed property and a method. Observe how Vue updates the UI efficiently with computed properties compared to methods.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive array of numbers

Create a computed property that returns doubled numbers

Create a method that returns doubled numbers

Display both doubled lists in the template

💡 Why This Matters

🌍 Real World

This project helps understand how Vue optimizes UI updates using computed properties versus methods, which is important for building fast and responsive web apps.

💼 Career

Knowing when to use computed properties or methods is a key skill for Vue developers to write efficient and maintainable code.

1

Data Setup: Create a reactive array of numbers

Create a reactive array called numbers with the values [1, 2, 3, 4, 5] using Vue's ref.

Vue

import { ref } from 'vue'

// Create a reactive array called numbers with [1, 2, 3, 4, 5]
// Your code here




  

Hint

Use const numbers = ref([1, 2, 3, 4, 5]) to create the reactive array.

2

Configuration: Import computed and define a computed property

Import computed from 'vue' and create a computed property called doubledComputed that returns each number in numbers.value multiplied by 2.

Vue

import { ref, computed } from 'vue'

const numbers = ref([1, 2, 3, 4, 5])

// Create a computed property called doubledComputed that doubles each number
// Your code here




  

Hint

Use computed(() => numbers.value.map(n => n * 2)) to create the computed property.

3

Core Logic: Define a method to double numbers

Create a function called doubledMethod that returns a new array with each number in numbers.value multiplied by 2.

Vue

import { ref, computed } from 'vue'

const numbers = ref([1, 2, 3, 4, 5])

const doubledComputed = computed(() => numbers.value.map(n => n * 2))

// Create a function called doubledMethod that returns numbers doubled
// Your code here




  

Hint

Define doubledMethod as a function that returns numbers.value.map(n => n * 2).

4

Completion: Display doubled numbers using computed and method in template

In the template, use v-for to display two lists: one showing doubledComputed values and one showing doubledMethod() values. Label each list with headings Doubled with Computed and Doubled with Method.

Vue

import { ref, computed } from 'vue'

const numbers = ref([1, 2, 3, 4, 5])

const doubledComputed = computed(() => numbers.value.map(n => n * 2))

function doubledMethod() {
  return numbers.value.map(n => n * 2)
}




  
  

Hint

Use <li v-for="(num, index) in doubledComputed" :key="index">{{ num }}</li> and similarly for doubledMethod().