Reactive Objects with reactive()

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 →

From your library

Reactive Objects with reactive()

Related