A brief analysis of the difference between ref and toRef in Vue3

1. Ref is copying, and the view will be updated

If you use ref to convert a certain attribute value in a certain object into responsive data

We modify the responsive data without affecting the original data;

The view will be updated at the same time.

Ref is replication. Replication will not affect the original data.

<template>
 <div>
    <div>
      <div>{{stateObj}}</div>
       <button @click="func1">Button</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"Zhang San",age:22}
    
    //Add a certain property in the object    //Become responsive data    // Instead of turning objects into responsive data    let stateObj=ref()
    function func1(){
      ="Zhang San becomes Li Si";
      //The original data has not changed. The original data obj {name: "Zhang San", age: 22}      ("Raw data obj",obj)

      //The responsive data has changed      /**
       Responsive stateObj RefImpl {
           _rawValue: "Zhang San becomes Li Si", _shallow: false,
           __v_isRef: true, _value: "Zhang San becomes Li Si"
       }
       **/
      //Become a ref object      ("Responsive stateObj",stateObj)

    }

    return {stateObj,func1}
},
}
</script>

It's a reference, the view does not update

If you use toRef to change the attributes in an object into responsive data

We modify the responsive data to affect the original data

If the data is created through toRef, the data will not trigger the view after modifying the value.

toRef is a reference; it refers to the properties in the previous object

So after you modify it, it will affect the value in the original data

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">Button</button>
    </div>
 </div>
</template>
<script>
import {toRef} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"Zhang San",age:22}
    //Change a certain attribute name in the object into responsive data    // Instead of turning objects into responsive data    let state=toRef(obj, 'name');
    ('toRef',state)
    function func1(){
      ="I am Li Si";
      ('obj',obj)
      ('state',state)
    }
    return {state,func1}
  },
}
</script>

3. Conclusion

Ref copy, modify the responsive data, and will not affect the previous data, and the interface will change.

ToRef reference, modifying responsive data will affect the previous data and the interface will not be updated.

Use scenarios of toRef

If you want to associate responsive data with the original data.

And after updating the responsive data, you do not want the view to be updated; then you can use toRef

summary:

Difference between ref and toRef

(1). Ref is essentially a copy, modifying the responsive data will not affect the original data; the essence of toRef is a reference relationship, modifying the responsive data will affect the original data

(2). When the ref data changes, the interface will be automatically updated; when the data changes, the interface will not be automatically updated.

(3). ToRef passes to participate in ref differently; toRef receives two parameters, which object is the first parameter, and which attribute of the second parameter is the object.

Summarize

This is the end of this article about the difference between ref and toRef in Vue3. For more information about the difference between ref and toRef, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!