How to use toRefs and toRef in Vue

1. toRefs()

In Vue 3,toRefs()You can convert properties of responsive objects into responsive refs. Mainly used to maintain the responsiveness of attributes when deconstructing responsive objects.

1. Import the toRefs function

import { toRefs } from 'vue';

2. Convert the properties of the responsive object to ref

const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!'
});
// toRefs() accepts a responsive object and returns a new object.// It contains all the properties of the original responsive object, which are refs.// This allows these properties to be responsive when used in components.const refs = toRefs(state);
(); // 0
++; // Modify properties(); // 1

3. The relationship with deconstruction

const { count, message } = toRefs(state);
// You can use count and message, both are responsive// After converting to ref, you need to use .value++; // Correct, count is still responsive// If you deconstruct directly like the following, it will lose its responsivenessconst { count, message } = state; // This method will lose its responsivenesscount++; // This modification will not trigger view update 

Summarize:

toRefs()It is a function in Vue 3 that converts the properties of a responsive object into responsive refs. It is very useful when dealing with deconstructed assignments and helps to remain responsive. When you need to deconstruct the properties of a responsive object and make sure they are still responsive, usetoRefs()It is a good choice.

2. toRef()

In Vue 3,toRefis a function used to convert a single property in a responsive object into a responsive reference. This function is very useful, especially when you need to pass a specific property of a responsive object. It is withtoRefsSimilar, buttoRefOnly handle one property, not the entire object.

1. Import the toRef function

import { toRef } from 'vue';

2. Convert a single property of a responsive object to a ref

toRefAccepts two parameters: a responsive object and the property name of the object. It returns a newref,thisrefIt is a responsive reference to the specified attributes in the original responsive object.

const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!'
});
// state object, and count property// Convert count to ref onlyconst countRef = toRef(state, 'count');

3. Access and modify referenced values

// Responsive references created using toRef require// Access and modify its values ​​via .value(); // 0
++; // Modify properties(); // 1

Summarize:

toRefIt is a function in Vue 3 that converts a single property of a responsive object into a responsive reference. It provides an easy way to access and manipulate specific properties of responsive objects while ensuring the responsiveness of these properties. usetoRefIt can make data transfer between components more flexible and responsive, and is very suitable for use in the Composition API.

This is the end of this article about the use of toRefs() and toRef() in Vue. For more information about the use of Vue toRefs() and toRef(), please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!