Vue 3 responsive objects: the use and difference between ref and reactive

Welcome to my CSDN homepage!


I am Chenyuan, a blogger who shares notes on CSDN.


Click here to view my homepage!


Chenyuan’s personal homepage


If you feel good, please give me a like!


Looking forward to your joining, learning and making progress together!

Directory

• introduction
• 1. Introduction
• • 1.1 Introduction to Vue 3
  • 1.2 The Importance of Reactive Objects
  • 1.3 Overview of ref and reactive
• 2. Use ref
• • 2.1 How to create ref
  • 2.2 How to use ref
  • 2.3 Applicable scenarios of ref
  • 2.4 Limitations of ref
• 3. Use reactive
• • 3.1 How to create reactive
  • 3.2 How to use reactive
  • 3.3 Applicable scenarios of reactive
  • 3.4 Limitations of reactive
• 4. Compare ref and reactive
• • 4.1 Comparison in terms of responsiveness
  • 4.2 Performance comparison
  • 4.3 Comparison of usage scenarios
  • 4.4 Comparison of API usage
• 5. Summary

Introduction

Vue.js is a popular JavaScript framework that enables developers to easily create user interfaces. In Vue.js, reactive objects are a very important part, they can automatically update the components that depend on them. In Vue 3, there are two ways to create reactive objects: using ref and using reactive. There are some differences between these two methods, and this article will detail their differences and how to use them.

1. Introduction

1.1 Introduction to Vue 3

Vue 3 is the latest version of Vue.js, which brings many new features and improvements, including better performance, simpler API, better TypeScript support, and more. Vue 3 continues to use the development concepts and patterns of Vue 2.x, while adding some new concepts and tools to enable developers to develop front-end applications more efficiently.

1.2 The importance of responsive objects

In Vue.js, reactive objects are a very important part. When an object’s properties are changed, if the object is used in a Vue component’s template, the component will automatically update to reflect the new property value. This feature allows developers to build user interfaces in a declarative manner without writing a lot of update logic.

1.3 Overview of ref and reactive

In Vue 3, there are two main ways to create reactive objects: using ref and using reactive.

ref is a function in Vue 3 for creating reactive references. It returns a wrapped object whose value can be changed, but its reference cannot. This means you can use a ref in a template and have it automatically update when its value changes.

reactive is a function in Vue 3 for creating reactive objects. It returns a reactive object whose properties and methods can be changed. This means you can use reactive in a template and have it automatically update when its properties or methods change.

2. Use ref

2.1 How to create ref

In Vue 3, you can use the ref function to create a reactive reference. The ref function can accept an initial value and return a reactive object. For example:

import {<!-- --> ref } from 'vue';
  
const count = ref(0);

In this example, we create a reactive reference named count with an initial value of 0.

2.2 How to use ref

One key point about using ref is that you cannot modify its value directly. To modify the value of ref, you need to use the .value attribute. For example:

count.value + + ; // Modify the value of count

You can also get the current value of ref through the .get method. For example:

console.log(count.get()); // Output 0

2.3 ref applicable scenarios

ref is best used in scenarios where the value needs to change, but the reference does not. For example, if you have an object and a property of the object is reactive, you can use ref to create the property.

2.4 Limitations of ref

One limitation of ref is that it can only be used with primitive data types (such as strings, numbers, booleans, etc.), not objects or arrays. This means that if you need to create a reactive object with multiple properties, you need to use the reactive function instead of ref.

3. Use reactive

3.1 Reactive creation method

In Vue 3, you can use the reactive function to create a reactive object. The reactive function can accept an initial object as a parameter and return a reactive object. For example:

import {<!-- --> reactive } from 'vue';
  
const state = reactive({<!-- -->
  count: 0,
  name: 'John',
});

In this example, we create a reactive object named state which contains two properties count and name.

3.2 How to use reactive

A key point of using reactive is that you can modify its properties directly. For example:

state.count + + ; // Modify the count attribute of state
state.name = 'Jane'; // Modify the name attribute of state

You can also create a reactive method or computed property through the reactive function. For example:

const doubleCount = reactive({<!-- -->
  get() {<!-- -->
    return this.count * 2;
  },
});

In this example, we create a reactive method called doubleCount that returns double the count. When you access doubleCount, it calculates its value dynamically.

3.3 Applicable scenarios of reactive

The reactive function is best used for creating reactive objects that contain multiple properties. Since reactive returns a reactive object, you can modify its properties directly without using the .value attribute.

reactive can also be used to create reactive objects that contain methods or computed properties. You can define methods or computed properties in reactive objects and call them directly from templates. This approach is very useful when dealing with complex data logic.

reactive is also suitable for situations where multiple states need to be tracked simultaneously. By using reactive, you can organize multiple states in a reactive object and easily access them in templates.

3.4 Limitations of reactive

While reactive provides broader reactive object functionality, it does have some limitations. First, reactive may have a larger performance overhead than ref. Because reactive needs to track all property changes in the object, while ref only needs to track changes to a primitive value. In performance-sensitive applications, using ref may be a better choice.

Secondly, reactive does not support the .set method. This means that if you want to set the value of a property of a reactive object, you can only assign it directly. This may cause some inconvenience. In addition, if you need to add some additional logic (such as getters or setters) on the reactive object, you may need to use computed or other methods to implement it instead of directly reactive.

const count = ref(0);

const state = reactive({<!-- --> count: 0 });