Analysis of the difference between vue3 ref and reactive

In Vue 3,refandreactiveare two APIs for creating responsive data, but their usage scenarios and implementations are somewhat different. In plain words, their differences can be understood as follows:

1. ref: Suitable for processing simple data

• What is it：refIt is a responsive tool used to wrap a basic type (such as numbers, strings, boolean values) or objects/arrays.
• How to use it: You need to pass.valueTo access or modifyrefThe value of the wrapper.
• Applicable scenarios: Suitable for processing a single value, such as a number, a string, or a simple object.

Code example:

import { ref } from 'vue';
const count = ref(0); // Create a responsive number(); // Output 0++; // Modify the value

Features:

• userefThe value of the package needs to be passed.valueto access or modify.
• Suitable for processing simple data, such as counters, switch status, etc.

2. reactive: Suitable for handling complex objects

• What is it：reactiveIt is a tool used to create a responsive object, suitable for handling complex nested objects or arrays.
• How to use it: Direct access or modify the properties of the object, no need to.value。
• Applicable scenarios: Suitable for processing complex objects or data structures, such as form data, user information, etc.

Code example:

import { reactive } from 'vue';
const user = reactive({
  name: 'Zhang San',
  age: 25,
  address: {
    city: 'Beijing',
  },
});
(); // Output 'Zhang San' = 26; // Modify properties directly

Features:

• usereactiveThe wrapped object can be directly accessed or modified, without.value。
• Suitable for handling complex nested objects or arrays.

3. Major differences and comparison

4. When to use itref, when to use itreactive？

userefThe situation：
- You just need to manage a simple value, such as a number, a string.
- You need to know clearly that this is a responsive data (because it needs to be used.value）。
- You handle a single state in a combinatorial API.

usereactiveThe situation：
- You need to manage a complex object or nested data structure.
- You want to access the attributes directly, but don't want to write.value。
- You are dealing with complex scenarios such as form data and user information.

5. Code comparison

refExample:

const count = ref(0);
const increment = () => {
  ++; // Requires .value};

reactiveExample:

const state = reactive({
  count: 0,
});
const increment = () => {
  ++; // Direct access to properties};

Summarize

• ref: Suitable for simple data,.valueaccess.
• reactive: Suitable for complex objects and directly access properties.

Simply put, if you only need to manage a value (such as a counter), useref;If you need to manage a complex object (such as a form), usereactive. Use the two together to cover most scenes!

This is the end of this article about the difference between vue3 ref and reactive. For more information about the difference between vue3 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!