Do you know ref as well as toRef and toRefs

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

We know that ref can be used to create a responsive data, and toRef can create a responsive data, so what’s the difference between them?

In fact, if the ref function is used to change attributes in an object to reactive data, modifying the reactive data does not affect the original data.

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

In the above code, when change is executed, the reactive data changes, but the raw data obJ does not.

And the reason is,refIs a copy of the nature, and the original data has no reference relationship

Ref (obj.name) = ref(‘ Alice ‘) = reactive({value:’ Alice ‘}

If toRef is used to turn attributes in an object into reactive data, modifying the reactive data will affect the original data. Note, however, that modifying reactive data created through toRef does not trigger an update to the UI interface.

So, toRef is essentially a 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(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}
Copy the code

In the above code, when change is executed, the reactive data changes, the original data OBJ does not change, but the UI interface is not updated

Summary:

Ref and toRef

(1). Ref is essentially copy, and modifying responsive data will not affect the original data; The nature of toRef is referential, and modifying reactive data affects the original data

(2). If the ref data changes, the interface will update automatically; ToRef The interface does not update automatically when data changes

(3). ToRef pass participating ref is different; ToRef takes two arguments, the first which object and the second which property of the object

So if you want reactive data to be associated with previous data, and you want to update reactive data without updating the UI, use toRef

Sometimes, we want to change multiple attributes of an object to reactive data, and require the reactive data to be associated with the original data, and update the reactive data without updating the interface. ToRefs can be used to batch set multiple data to reactive data. (toRef can only set one data at a time)

ToRefs takes an object as an argument, iterates through all the attributes of the object, and then calls toRef one by one

For example,

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