Reactive Variables with ref()

Snippet

Reactive Variables with ref()

In Vue's Composition API, the ref() function is used to create reactive variables. When the value of a ref changes, Vue automatically updates the parts of the user interface that depend on it.

snippet.js
javascript
import { ref } from 'vue';
 
const count = ref(0);
 
function increment() {
  count.value++;
}

vue

Breakdown

import { ref } from 'vue';

Imports the ref function from the Vue library to enable reactivity.

const count = ref(0);

Creates a reactive reference with an initial value of 0.

count.value++;

Increments the value property. You must use .value when accessing refs in JavaScript.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Reactive Variables with ref()

Related