Why reactivity is Vue's core concept - See It in Action

Understanding Reactivity in Vue

📖 Scenario: You are building a simple Vue app that shows a message and updates it automatically when the user types something new.

🎯 Goal: Create a Vue component that uses reactivity to update the displayed message as the user types in an input box.

📋 What You'll Learn

Create a reactive variable to hold the message

Bind the input box to the reactive message variable

Display the message reactively in the template

Use Vue 3 Composition API with <script setup>

💡 Why This Matters

🌍 Real World

Reactivity lets web apps update the screen instantly when users interact, like live search or chat apps.

💼 Career

Understanding Vue's reactivity is essential for building modern, responsive user interfaces in many web development jobs.

1

Set up the reactive message variable

Create a reactive variable called message using Vue's ref function and set its initial value to "Hello, Vue!".

Vue

  
    
    
  



import { ref } from 'vue'

// Create a reactive variable called message with initial value "Hello, Vue!"
// Your code here

Need a hint?

Use ref from Vue to create a reactive variable.

2

Bind the input to the reactive message

Bind the input element's value to the reactive variable message using v-model.

Vue

  
    
    
    
  



import { ref } from 'vue'

const message = ref("Hello, Vue!")

Need a hint?

Use v-model on the input to connect it to the reactive variable.

3

Display the reactive message

Display the reactive variable message inside the <p> tag using Vue's template syntax.

Vue

  
    
    
    {{ message }}
  



import { ref } from 'vue'

const message = ref("Hello, Vue!")

Need a hint?

Use double curly braces {{ }} to show the reactive variable in the template.

4

Complete the reactive Vue component

Ensure the Vue component uses the <script setup> syntax, imports ref from 'vue', declares the reactive message variable, binds it with v-model on the input, and displays it inside the <p> tag.

Vue

Need a hint?

Check that all parts of the component are present and correctly connected.