Virtual DOM and diffing mental model in Vue - Mini Project: Build & Apply

Virtual DOM and Diffing Mental Model in Vue

📖 Scenario: You are building a simple Vue app that shows a list of fruits. You want to understand how Vue updates the screen efficiently when the list changes. This happens because Vue uses a Virtual DOM and a diffing process to update only what changed.

🎯 Goal: Create a Vue component that displays a list of fruits. Then add a button to add a new fruit. Observe how Vue updates the list efficiently using the Virtual DOM and diffing.

📋 What You'll Learn

Create a reactive list of fruits in the component's data

Add a button that adds a new fruit to the list

Use Vue's template syntax to render the list with v-for

Ensure the list updates correctly when a new fruit is added

💡 Why This Matters

🌍 Real World

This project shows how Vue uses a Virtual DOM to update only the parts of the screen that change, making apps fast and efficient.

💼 Career

Understanding Virtual DOM and diffing is key for frontend developers working with Vue or similar frameworks to build responsive and performant user interfaces.

1

Set up the initial fruit list

Create a Vue component with a fruits array in the setup function containing these exact strings: 'Apple', 'Banana', 'Cherry'. Use ref from Vue to make it reactive.

Vue

// Create a reactive array called fruits with 'Apple', 'Banana', 'Cherry'
// Your code here



  

Hint

Use ref to create a reactive array inside setup.

2

Add a button to add a new fruit

Add a variable called newFruit with the value 'Date' inside the setup function. Then add a function called addFruit that pushes newFruit into the fruits array.

Vue

import { ref } from 'vue'
const fruits = ref(['Apple', 'Banana', 'Cherry'])
// Add newFruit variable and addFruit function here
// Your code here



  

Hint

Create a string variable and a function that adds it to the fruits array.

3

Render the fruit list using v-for

In the <template>, use a <ul> element. Inside it, use v-for to loop over fruits.value with fruit as the item variable. Display each fruit inside a <li>.

Vue

import { ref } from 'vue'
const fruits = ref(['Apple', 'Banana', 'Cherry'])
const newFruit = 'Date'
function addFruit() {
  fruits.value.push(newFruit)
}



  
    
    
  

Hint

Use v-for="fruit in fruits" and add a :key with fruit.

4

Add a button to update the list

Below the <ul>, add a <button> with the text Add Date. Bind its @click event to the addFruit function.

Vue

import { ref } from 'vue'
const fruits = ref(['Apple', 'Banana', 'Cherry'])
const newFruit = 'Date'
function addFruit() {
  fruits.value.push(newFruit)
}



  
    {{ fruit }}
  
  
  

Hint

Add a button with @click="addFruit" to update the list.