Why Vue performance matters - See It in Action

Why Vue performance matters

📖 Scenario: You are building a simple Vue app that shows a list of products with their prices. You want to understand why Vue's performance features help your app stay fast and smooth, especially when the list grows.

🎯 Goal: Create a Vue component that displays a list of products. Then add a reactive variable to filter expensive products. Finally, use Vue's computed property to optimize filtering for better performance.

📋 What You'll Learn

Create a reactive array called products with 5 product objects, each having name and price properties.

Add a reactive variable called priceThreshold set to 50.

Use a computed property called expensiveProducts that returns products with price greater than priceThreshold.

Display the expensiveProducts list in the template with product names and prices.

💡 Why This Matters

🌍 Real World

Filtering and displaying lists of items is common in shopping sites, dashboards, and data apps. Efficient updates keep the user experience smooth.

💼 Career

Understanding Vue's reactivity and computed properties is essential for frontend developers building fast, maintainable web apps.

1

Set up the products data

Create a reactive array called products inside the setup() function with these exact objects: { name: 'Pen', price: 10 }, { name: 'Notebook', price: 25 }, { name: 'Backpack', price: 60 }, { name: 'Calculator', price: 80 }, { name: 'Desk Lamp', price: 45 }.

Vue

import { ref } from 'vue'

// Create a reactive array called products with the given product objects
// Your code here




  

Hint

Use ref from Vue to create a reactive array inside setup().

2

Add a price threshold variable

Inside the setup() function, create a reactive variable called priceThreshold and set it to 50.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Pen', price: 10 },
  { name: 'Notebook', price: 25 },
  { name: 'Backpack', price: 60 },
  { name: 'Calculator', price: 80 },
  { name: 'Desk Lamp', price: 45 }
])

// Create a reactive variable called priceThreshold and set it to 50
// Your code here




  

Hint

Use ref to create a reactive variable for the price threshold.

3

Create a computed property for filtering

Inside the setup() function, create a computed property called expensiveProducts that returns products with price greater than priceThreshold.value. Use Vue's computed from vue.

Vue

import { ref, computed } from 'vue'

const products = ref([
  { name: 'Pen', price: 10 },
  { name: 'Notebook', price: 25 },
  { name: 'Backpack', price: 60 },
  { name: 'Calculator', price: 80 },
  { name: 'Desk Lamp', price: 45 }
])

const priceThreshold = ref(50)

// Create a computed property called expensiveProducts that filters products by priceThreshold.value
// Your code here




  

Hint

Import computed from Vue and use it to create a reactive filtered list.

4

Display the filtered products in the template

In the