Ref and Reactive

This article explains how to make your components/pages reactive.

What does reactive mean?

When a reactive variable is changed, the component will be rerendered to show this update. In other words, reactive variables can be considered the "state" variables of your component.

Reactive Variables

Reactive variables are objects. For example:

<template>    <main>        //Display the first and last name in the fullName object        <p> {{ fullName.first }} {{ fullName.last }} </p>    </main></template><script setup>//import reactive fucntionalityimport { reactive } from "vue";//declare fullName and then make it a reactive objectlet fullName = reactive({    first: "Jack",    last: "Reacher"})</script>

In the template of this example, fullName.first and fullName.last will render as Jack Reacher.

Now what if we want to change the name of from Jack Reacher to Jack Gemini?

<template>    <main>        <p> {{ fullName.first }} {{ fullName.last }} </p>        //Adding a button that calls "changeLastName" method        <button @click="changeLastName"> </button>    </main></template><script setup>import { reactive } from "vue";let fullName = reactive({    first: "Jack",    last: "Reacher"})//Add method to change the property "last"//inside the fullName reactive objectconst changeLastName = () => {    fullName.last = "Gemini";}</script>

We can target a specific property within the reactive object. In this case, we target the property last within the reactive object fullName.

If you wanted, you could just make one reactive object, call it state, and store all reactive variables you'd want to change within that component:

<script setup>import { reactive } from "vue";let localState = reactive({    names: ["Jack Reacher", "Charlie Mann", "CooCoo Razzle"],    companyName: "Jack Transportation Inc.",    revenue: 450000})</script>

It's up to you how you want to structure your reactive variables. Unlike Ref, the other reactive type we are about to explain, Reactive REQUIRES an object. You cannot use another primitive/data type.

Ref Variables

This is more akin to using a single variable that uses a single data type.

For example:

<template>    <main>        <h1>  {{ name }} </h1>        <button @click="changeName"> Change Name </button>    </main></template><script setup>import { ref } from "vue";//Declaring a ref variablelet name = ref("Joe");//Change the value of name by calling name.valueconst changeName = () => {    name.value = "Brian";}</script>

The name variable is a ref variable with the value "Joe".

We then create a method called changeName. Notice how we call name.value, not just name alone. To access the data inside name, we need to use the .value syntax.

Once the button is clicked, changeName is called, and the h1 tag changes from "Joe" to "Brian".

You can use any data type within a ref variable. This is usually preferred amongst developers until they want to start tying together data logically. Then a reactive variable can be more suitable.

But here's a bonus tip (totally subjective): just use refs until you find a need for reactive. The .value syntax with ref makes it clear when working with reactive data.

Ref vs Reactive?

Which one should you use. Here's my opinion that is also shared by many in the Vue community:

Use Ref until you find a need to use Reactive.

The .value syntax to access Ref variables makes it explicit that you are dealing with state. And when you have variables the logically group together, using Reactive makes sense, like the localState.variableName example above.