這篇我們看下toRef和toRefs的基本使用
我們知道ref可以用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，而toRef也可以創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，那他們之間有什么區(qū)別呢？
事實(shí)上，如果利用ref函數(shù)將某個(gè)對(duì)象中的屬性變成響應(yīng)式數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)是不會(huì)影響到原始數(shù)據(jù)。

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}
  }
}

上述代碼，當(dāng)change執(zhí)行的時(shí)候，響應(yīng)式數(shù)據(jù)發(fā)生改變，而原始數(shù)據(jù)obj并不會(huì)改變。
原因在于，ref的本質(zhì)是拷貝，與原始數(shù)據(jù)沒(méi)有引用關(guān)系

需要注意ref(obj.name)相當(dāng)于ref('alice')相當(dāng)于reactive({value:'alice'})
所以在修改數(shù)據(jù)時(shí)，是修改newObj.value=xxx

而如果使用toRef將某個(gè)對(duì)象中的屬性變成響應(yīng)式數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)是會(huì)影響到原始數(shù)據(jù)的。但是需要注意，如果修改通過(guò)toRef創(chuàng)建的響應(yīng)式數(shù)據(jù)，并不會(huì)觸發(fā)UI界面的更新。
所以，toRef的本質(zhì)是引用，與原始數(shù)據(jù)有關(guān)聯(lián)

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}
  }
}

上述代碼，當(dāng)change執(zhí)行的時(shí)候，響應(yīng)式數(shù)據(jù)發(fā)生改變，原始數(shù)據(jù)obj并不會(huì)改變，但是UI界面不會(huì)更新

小結(jié)：
ref和toRef的區(qū)別
(1). ref本質(zhì)是拷貝，修改響應(yīng)式數(shù)據(jù)不會(huì)影響原始數(shù)據(jù)；toRef的本質(zhì)是引用關(guān)系，修改響應(yīng)式數(shù)據(jù)會(huì)影響原始數(shù)據(jù)
(2). ref數(shù)據(jù)發(fā)生改變，界面會(huì)自動(dòng)更新；toRef當(dāng)數(shù)據(jù)發(fā)生改變是，界面不會(huì)自動(dòng)更新
(3). toRef傳參與ref不同；toRef接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是哪個(gè)對(duì)象，第二個(gè)參數(shù)是對(duì)象的哪個(gè)屬性

所以如果想讓響應(yīng)式數(shù)據(jù)和以前的數(shù)據(jù)關(guān)聯(lián)起來(lái)，并且想在更新響應(yīng)式數(shù)據(jù)的時(shí)候不更新UI，那么就使用toRef

有的時(shí)候，我們希望將對(duì)象的多個(gè)屬性都變成響應(yīng)式數(shù)據(jù)，并且要求響應(yīng)式數(shù)據(jù)和原始數(shù)據(jù)關(guān)聯(lián)，并且更新響應(yīng)式數(shù)據(jù)的時(shí)候不更新界面，就可以使用toRefs，用于批量設(shè)置多個(gè)數(shù)據(jù)為響應(yīng)式數(shù)據(jù)。(toRef一次僅能設(shè)置一個(gè)數(shù)據(jù))
toRefs接收一個(gè)對(duì)象作為參數(shù)，它會(huì)遍歷對(duì)象身上的所有屬性，然后挨個(gè)調(diào)用toRef執(zhí)行
例如

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}
  }
}

以上就是vue3 toRef函數(shù)和toRefs函數(shù)的基本使用!