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

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

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

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'



  
  

Hint

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

Practice

1. What is the main benefit of Vue's Reactivity Transform feature?

easy

A. It allows writing reactive code without using .value on refs.

B. It automatically converts all variables to reactive objects.

C. It removes the need for any imports in Vue components.

D. It disables reactivity for better performance.

Solution

1. Step 1: Understand Reactivity Transform purpose

   Reactivity Transform lets you write reactive code without explicitly accessing .value on refs.

2. Step 2: Compare options

   Only It allows writing reactive code without using .value on refs. correctly states this benefit. Other options are incorrect or unrelated.

3. Final Answer:

   It allows writing reactive code without using .value on refs. -> Option A

4. Quick Check:

   Reactivity Transform = no .value needed [OK]

Hint: Reactivity Transform removes .value usage on refs [OK]

Common Mistakes:

• Thinking it disables reactivity
• Assuming it auto-reactivates all variables
• Believing it removes all imports

2. Which syntax correctly declares a reactive primitive using Reactivity Transform in Vue?

easy

A. const count = reactive(0)

B. const count = ref(0)

C. const count = $ref(0)

D. const count = $reactive(0)

Solution

1. Step 1: Identify correct Reactivity Transform syntax for primitives

   For primitives, Reactivity Transform uses $ref to declare reactive variables.

2. Step 2: Check options

   const count = $ref(0) uses $ref(0), which is correct. const count = ref(0) uses classic ref, not Reactivity Transform. Options A, C, and D are incorrect for primitives.

3. Final Answer:

   const count = $ref(0) -> Option C

4. Quick Check:

   Primitive reactive = $ref() [OK]

Hint: Use $ref() for primitives in Reactivity Transform [OK]

Common Mistakes:

• Using reactive() for primitives
• Confusing $reactive with $ref
• Using classic ref() instead of $ref()

3. Given the code:

import { $ref } from 'vue'
const count = $ref(1)
count++
console.log(count)

What will be logged to the console?

medium

A. 1

B. undefined

C. Error: count is not reactive

D. 2

Solution

1. Step 1: Understand $ref behavior

   $ref creates a reactive primitive that can be used without .value. Incrementing count directly updates its value.

2. Step 2: Trace code execution

   count starts at 1, then count++ increments it to 2, so console.log(count) outputs 2.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   Increment $ref count logs 2 [OK]

Hint: Increment $ref variable directly without .value [OK]

Common Mistakes:

• Expecting .value usage
• Thinking count remains 1
• Assuming runtime error

4. What is the main issue with this Vue Reactivity Transform code?

import { $reactive } from 'vue'
const state = $reactive({ count: 0 })
state.count++
console.log(state.count)

medium

A. You cannot increment properties on $reactive objects.

B. Reactivity Transform requires enabling in config before using $reactive.

C. You must use .value to access properties on $reactive objects.

D. The $reactive function only works with primitives, not objects.

Solution

1. Step 1: Check Reactivity Transform usage requirements

   $reactive requires enabling Reactivity Transform in Vue config before usage.

2. Step 2: Analyze code behavior

   Without enabling config, $reactive usage causes errors or unexpected behavior.

3. Final Answer:

   Reactivity Transform requires enabling in config before using $reactive. -> Option B

4. Quick Check:

   Enable config for $reactive use [OK]

Hint: Enable Reactivity Transform in config before using $reactive [OK]

Common Mistakes:

• Thinking $reactive works without config
• Using .value on $reactive objects
• Believing $reactive only works with primitives

5. Which of the following is a limitation of Vue's Reactivity Transform when working with complex nested objects?

hard

A. It cannot track changes on deeply nested properties without manual $reactive wrapping.

B. It automatically unwraps all nested objects, causing performance issues.

C. It requires using .value for nested reactive properties.

D. It disables reactivity on nested arrays.

Solution

1. Step 1: Understand Reactivity Transform limitations on nested objects

   Reactivity Transform does not automatically make deeply nested properties reactive unless wrapped with $reactive.

2. Step 2: Evaluate options

   It cannot track changes on deeply nested properties without manual $reactive wrapping. correctly states this limitation. Options B, C, and D are incorrect or false statements.

3. Final Answer:

   It cannot track changes on deeply nested properties without manual $reactive wrapping. -> Option A

4. Quick Check:

   Deep nested reactivity needs manual $reactive [OK]

Hint: Wrap nested objects with $reactive to track changes [OK]

Common Mistakes:

• Assuming all nested properties are reactive automatically
• Using .value on nested objects
• Believing Reactivity Transform disables nested arrays