Basic use of toRef function and toRefs function in vue3

In this article, let's take a look at the basic usage of toRef and toRefs

We know that ref can be used to create a responsive data, and toRef can also create a responsive data. So what is the difference between them?
In fact, if the ref function is used to turn the attributes in an object into responsive data, modifying the responsive data will not affect the original data.

import {ref} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= ref();
    function change(){
       = 'Tom';
      (obj,newObj)
    }
    return {newObj,change}
  }
}

In the above code, when the change is executed, the responsive data changes, while the original data obj does not change.
The reason is that the essence of ref is a copy and has no reference relationship with the original data.

It should be noted that ref() is equivalent to ref('alice') is equivalent to reactive({value:'alice'})
So when modifying the data, it is to modify =xxx

If you use toRef to turn the attributes in an object into responsive data, modifying the responsive data will affect the original data. However, it should be noted that if you modify the responsive data created through toRef, it will not trigger the update of the UI interface.
Therefore, the essence of toRef is reference, associated with the original data

import {toRef} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRef(obj, 'name');
    function change(){
       = 'Tom';
      (obj,newObj)
    }
    return {newObj,change}
  }
}

The above code, when the change is executed, the responsive data changes, the original data obj will not change, but the UI interface will not be updated.

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.

So if you want to associate responsive data with previous data and want to not update the UI when updating responsive data, then use toRef

Sometimes, we want to turn multiple attributes of the object into responsive data, and we require responsive data to be associated with the original data. When updating responsive data, we can use toRefs to batch set multiple data as responsive data. (toRef can only set one data at a time)
toRefs receives an object as a parameter, which will iterate through all properties on the object and then call toRef one by one to execute
For example

import {toRefs} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRefs(obj);
    function change(){
       = 'Tom';
       = 18;
      (obj,newObj)
    }
    return {newObj,change}
  }
}

Vue3's toRef

When changing the value,

The age1 obtained by ref() will not change, because ref is copied, and a new data value is copied and operated separately, and will not affect each other when updated.

The age2 obtained by toRef(person, ‘age’) will change because toRef is a reference. It creates a ref object for a property on the source responsive object. Both operate internally with the same data value, and the two are synchronized when updated.

  setup() {
    let person =reactive( { name: "long",age:23 });

    let age1 = ref();
    let age2=toRef(person,'age')

    const change1 = () => {
      ++
    };
    return {
      age1,
      age2,
      change1,
    };
  },

Application: toRef is useful when you want to pass a ref of a prop to a composite function

The useFeatureX function needs to use the foo attribute in props, and foo must be ref.

  setup (props, context) {
    const length = useFeatureX(toRef(props, 'foo'))

    return {
      length
    }
  }

This is the article about the vue3 toRef function and toRefs function. For more related contents of vue3 toRef and toRefs function, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!