Vue3 code example using ref and reactive to manage state

Preface

Vue 3 introduces the Composition API, which provides a more flexible and more organized way to manage the state of components. ref and reactive are two core functions used in the Composition API to declare reactive data. In Vue 3, using setup syntax sugar makes it easier to use these features. This article will explore how to use ref and reactive to manage state and explain the differences between them.

Basic usage of ref and reactive

Use ref

ref is used to create a responsive reference object, usually used for basic data types (such as strings, numbers, etc.).

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  ++;
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

In this example, we create a name calledcountResponsive references and throughincrementFunction to update its value. Pay attention, access and modifyrefWhen creating responsive data, you need to pass.valueAttributes.

Use reactive

reactiveUsed to create a responsive complex data type, such as an object or an array.

<script setup>
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue 3!'
});

function increment() {
  ++;
}
</script>

<template>
  <button @click="increment">Count is: {{  }}</button>
  <p>{{  }}</p>
</template>

In this example, we create a name calledstateResponsive object, which contains two properties:countandmessage. passincrementFunction updatecountThe value of the attribute.

The difference between ref and reactive

1. Data Type

• refUsed for basic data types (such as strings, numbers, boolean values, etc.).
• reactiveUsed for complex data types (such as objects, arrays, etc.).

2. Access and modify

• refThe responsive reference created needs to be passed.valueProperties to access and modify.
• reactiveThe responsive object created can directly access and modify its properties without using.value。

3. Purpose

• When you need to use a basic data type as responsive data, useref。
• When you need to use an object or array as responsive data, usereactive。

4. Combined with toRefs

When you need toreactiveWhen each property of an object is referenced as an independent responsive, you can usetoRefs。

<script setup>
import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue 3!'
});

const { count, message } = toRefs(state);

function increment() {
  ++;
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
  <p>{{ message }}</p>
</template>

In this example, we usetoRefsWillreactiveEach property of the object is converted into an independent responsive reference, so that it can be used asrefOperate them the same.

Summarize

Vue 3's Composition API provides two ways to manage state, ref and reactive, each with its own characteristics and applicable scenarios. ref is suitable for basic data types, while reactive is suitable for complex data types. Understanding the difference between them and using them correctly can help you manage the state of components more effectively and write clearer and maintainable code.

This is the article about Vue3's code examples for managing state using ref and reactive. For more information about Vue3's status management using ref and reactive, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!