This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Vue3 slowly learn series! 🙉

preface

So let’s start by reviewing ref and Reactive, and generally speaking,

• Ref is used to define simple string or numeric responses,
• Reactive is used to define the response of an array of objects.

The definition of toRef

Let’s start with toRef, which is defined like this on the official website:

📖 toRef

Can be used to create a new REF for a property on a source responsive object. The REF can then be passed, maintaining a reactive connection to its source property.

Just look at this sentence is not a little do not know what it means, here we will analyze this sentence.

The first thing you can see from the definition is that toRef is a prop for a responsive object. So let’s create a responsive object. (As mentioned earlier, we should use Reactive to create responsive objects.)

 let obj = reactive({count: 3});
Copy the code

So what’s wrong with that? Let’s test a very common way of writing it

We dynamically change the property values of the [object], and as you can see from the renderings, everything looks fine. (Values update normally both in view and console)

Now let’s make a little change to the above code, assign the value of the object attribute to a variable, and perform the operation.

At this point, if we look at the performance, we will see that the problem is that the view and the original value are not updated, except that the value of our newly assigned variable has changed.

The role of toRef

ToRef is used to solve the above problem. The above problem is clearly that our response is broken. As you can see from the definition of toRef at the beginning, toRef will maintain a responsive connection to its source property.

Now let’s add toRef

<script setup> import {reactive,toRef} from 'vue' let obj = reactive({count: 3}); Let currentCountRef = toRef(obj,'count') The second argument is the property name function add1() {currentCountref.value+ + console.log(' the value of obj: ', obj); Console. log(' Value of currentCountRef: ', currentCountRef); } </script>Copy the code

At this point, the view, the original value, and the assigned variable value are kept up to date.

Ref and toRef

ToRef can be used to create a new REF for a property on a source responsive object. So if we can just use ref, we can try it out

🎨 effect: As you can see, if ref is used, only the assigned variable retains its response, but the original object value does not change.

Ref and toRef

toRefs

Definition of official website:

Converts a reactive object to a normal object, where each property of the resulting object is a REF pointing to the corresponding property of the original object.

As you can see, toRefs and toRefs are very similar. They look similar in name, and they do look similar in function. It’s just that one of the attributes is processed individually and one of the attributes is processed in batches.

<script setup> import {reactive,toRefs} from 'vue' let obj = reactive({name: 'toRefs ', age:18}); Let name = toRef(obj,'name') let age = toRef(obj,'age') // equivalent let {name,age} = toRefs(obj) </script>Copy the code

Other:

One of the main uses of toRefs is to deconstruct the Proxy in a disguised way. First of all, understand the common sense that if the Proxy is deconstructed, the basic data will lose the responsiveness.

Import {reactive} from 'vue' let obj = reactive({name: 'vue', age:18}); let { name, age } = obj; /* The responsiveness of both properties will be lost if you write this directly. In this case, we need to convert our reactive objects to a set of Refs. These Refs will retain reactive associations with the source object */Copy the code

So if you want to deconstruct the Proxy without losing responsiveness, you can use toRefs.

At the end

Welcome erratum 💥

References:

The responsiveness API toRef

The responsiveness API toRefs

Responsiveness foundation

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 JavaScript Proxy how to use?

Do you know how to use getters and setters in 👉 JS?

👉 In-depth understanding of ES6 arrow objects

👉 JS decorator pattern instance analysis