Snippet

Basic Data Reactivity with ref

In the Composition API, ref() is used to make a variable reactive. To change or read the value inside the script, you must use the .value property.

snippet.js

javascript

<script setup>
import { ref } from 'vue';
 
const username = ref('Alex');
 
const updateName = () => {
  username.value = 'Sam';
};
</script>

vue

Breakdown

ref('Alex')

Initializes a reactive state with the string 'Alex'.

username.value = 'Sam'

Updates the underlying value, which triggers UI updates automatically.