Snippet

Reactive Objects with reactive()

While ref() is used for single values, reactive() is used to make an entire object reactive. You don't need .value to access properties.

snippet.js

javascript

import { reactive } from 'vue';
 
const userProfile = reactive({
  name: 'Alex',
  level: 1
});
 
function updateName(newName) {
  userProfile.name = newName;
}

vue

Breakdown

const userProfile = reactive({

Creates a reactive state object that Vue tracks for changes.

userProfile.name = newName;

Updates the property directly without needing a .value suffix.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Reactive Objects with reactive()

Related