Shulou(Shulou.com)06/02 Report--

This article mainly shows you "what are the differences between ref toRef and toRefs in Vue3". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn "what is the difference between ref toRef and toRefs in Vue3".

I. Foundation

1.ref

(1) generate responsive data of value type, and modify the value through .value

{{ageRef}} import {ref} from 'vue'export default {setup () {const ageRef = ref (20) setInterval () = > {ageRef.value + = 1}, 1000) return {ageRef},}

The above code defines an ageRef variable and adds 1 to the ageRef every second, and the value displayed on the page will also be increased by 1. 5.

(2) can be used in reactive

Change the above code as follows, introduce reactive to define variables, introduce ref-defined variables into reactive, and display reactive variables in the template. The final effect is the same as in (1) above.

{{info.age}} import {ref, reactive} from 'vue'export default {setup () {const ageRef = ref (20) const info = reactive ({age: ageRef}) setInterval (() = > {ageRef.value + = 1}, 1000) return {info},}

(3) can be used to obtain Dom

Ref-dom-testimport {ref, onMounted} from 'vue'export default {setup () {const eleDom = ref (null) onMounted (() = > {console.log (eledom.value [XSS _ clean]) / / ref-dom-test}) return {eleDom}},}

The above code console outputs ref-dom-test, indicating that the Dom element has been obtained.

To get a Dom element, you must comply with the following rules

The defined ref variable name must be the same as the value in the ref in the template, such as eleDom in the code

2.toRef

Prop for a responsive object

Create a ref with responsive

The two maintain a citation relationship.

Let's take a look at the following code

{{state.age}}-- {{ageRef}} import {toRef, reactive} from 'vue'export default {setup () {const state = reactive ({name:' JL', age: 18}) const ageRef = toRef (state, 'age') setTimeout (() = > {state.age = 20}, 1000) setTimeout (() = > {ageRef.value = 21}, 2000) return {state, ageRef},}

In the above code, you use toRef to change the age property of state into a responsive variable, and then change the age value of state to 20 after 1 second, and ageRef to 20. After 2 seconds, change the value of ageRef to 21, and the age value of state becomes 21, indicating that the two maintain a mutual reference relationship.

ToRef is for response, not for ordinary objects. If it is used for non-response, the output does not have a response.

3.toRefs

Turn a responsive object into a normal object

Each property of the object is the corresponding ref

The two maintain a citation relationship.

Let's take a look at the following code

{{name}}-- {{age}} import {reactive, toRefs} from 'vue'export default {setup () {const state = reactive ({name:' JL', age: 18}) const stateRefs = toRefs (state) setTimeout (() = > {state.age = 20}, 1000) setTimeout (() = > {stateRefs.age.value = 21}, 2000) return stateRefs},}

In the above code, you use toRefs to turn state into a normal object, so you can return stateRefs directly, and you can call name and age directly from template. Then change the age value of state to 20 after 1 second, and the age in the page will also become 20; after 2 seconds, the value of name in stateRefs will be changed to 21, and the age value in the page will also become 21, indicating that the two maintain a reference relationship.

After toRefs turns a responsive object into a normal object, each property has a responsive ref, so you need to use .value to get its value.

4. The best way to use

Reactive is the response of the object, and ref is the response of the value type.

Return toRefs (state) in setup, or toRef (state, 'xxx')-(so that state.xxx can not be used in template)

All variables in ref are named with xxxRef.

When the composite function returns a responsive object, use toRefs

For example:

X: {{x}} y: {{y}} import {reactive, toRefs} from 'vue'export default {setup () {function test () {const state = reactive ({x: 1, y: 2}) return toRefs (state)} const {x, y} = test () setTimeout () = > {x.value = 2}, 1000) return {x, y}

In the above code, the responsive object state is defined in the test function, and it is converted to a normal object and returned through toRefs. In this case, the value can be assigned structurally, and the value is responsive.

Second, in depth

1. Why do you need ref

As we mentioned above, you can also convert value types to responsive using reactive and toRef, so why do you need ref?

The value type does not have responsive (proxy)

Setup (), computed (). It is possible to return value types. If vue does not define ref, users will create their own ref in other ways (reactive/toRef, reactive/toRefs) when they need responsive value types, which will cause more confusion in the code.

Why does 2.ref need .value?

Why does ref need to add a .value to get the value? Why bother so much?

Ref is an object (without losing responsiveness), and value stores values

Response is implemented through the get and set of the .value attribute.

.value is not required for reactive and templates (vue compilation), but for other cases

3. Why do you need toRef and toRefs

Original intention: deconstruct object data without losing responsiveness

Premise: it is for responsive objects, not ordinary objects.

Result: do not create responsiveness, only continue responsiveness

The above is all the content of the article "what is the difference between ref toRef and toRefs in Vue3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.