Reactivity transform and limitations in Vue - Mini Project: Build & Apply

Reactivity Transform and Limitations in Vue 3.4+

📖 Scenario: You are building a simple Vue 3 application that tracks a user's profile information reactively. You want to use Vue's reactivity transform feature to simplify your code and understand its limitations.

🎯 Goal: Build a Vue 3 component using the Composition API with reactivity transform enabled. You will create reactive variables without ref() or reactive() calls, update them, and display their values. You will also handle a limitation where reactivity transform does not work with destructured properties.

📋 What You'll Learn

Use Vue 3.4+ with reactivity transform enabled

Create reactive variables using $ref syntax

Update reactive variables directly without .value

Demonstrate a limitation by destructuring a reactive object and showing it does not stay reactive

Use <script setup> with reactivity transform syntax

💡 Why This Matters

🌍 Real World

Reactivity transform simplifies Vue component code by reducing boilerplate and making reactive variables easier to write and read. Understanding its limitations helps avoid bugs in real apps.

💼 Career

Vue developers often use reactivity transform in modern projects. Knowing how to apply it correctly and handle its limitations is important for writing clean, maintainable Vue 3 code.

1

Setup reactive variables with reactivity transform

Inside a <script setup> block, create a reactive string variable called name initialized to "Alice" using the $ref syntax. Also create a reactive number variable called age initialized to 30 using $ref.

Vue

// Create reactive variables 'name' and 'age' using $ref
// Your code here

Need a hint?

Use const name = $ref('Alice') and const age = $ref(30) to create reactive variables with reactivity transform.

2

Add a reactive object and update variables

Add a reactive object called profile initialized with { city: 'Paris', country: 'France' } using $ref. Then update name to 'Bob' and age to 35 directly without using .value.

Vue

const name = $ref('Alice')
const age = $ref(30)
// Create reactive object 'profile' with city and country
// Update 'name' to 'Bob' and 'age' to 35
// Your code here

Need a hint?

Use const profile = $ref({ city: 'Paris', country: 'France' }) to create a reactive object. Then assign new values to name and age directly.

3

Demonstrate limitation: destructuring reactive object

Destructure profile into city and country variables using standard JavaScript destructuring. Then update city to 'Lyon'. Note that this update will not be reactive because destructured variables lose reactivity with reactivity transform.

Vue

const name = $ref('Alice')
const age = $ref(30)
const profile = $ref({ city: 'Paris', country: 'France' })

name = 'Bob'
age = 35
// Destructure profile into city and country
// Update city to 'Lyon'
// Your code here

Need a hint?

Destructure with const { city, country } = profile and then assign city = 'Lyon'. This shows the limitation that destructured variables are not reactive.

4

Complete component template to display reactive data

Add a <template> section that displays name, age, profile.city, and profile.country inside <p> tags. This will show the reactive updates except for the destructured city variable which is not reactive.

Vue

const name = $ref('Alice')
const age = $ref(30)
const profile = $ref({ city: 'Paris', country: 'France' })

name = 'Bob'
age = 35

const { city, country } = profile

city = 'Lyon'



  
  

Need a hint?

Use <p> tags inside <template> to show the reactive variables with mustache syntax like {{ name }}.