這篇我們看下toRef和toRefs的基本使用

我們知道ref可以用于創(chuàng)建一個響應(yīng)式數(shù)據(jù)，而toRef也可以創(chuàng)建一個響應(yīng)式數(shù)據(jù)，那他們之間有什么區(qū)別呢？
事實上，如果利用ref函數(shù)將某個對象中的屬性變成響應(yīng)式數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)是不會影響到原始數(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í)行的時候，響應(yīng)式數(shù)據(jù)發(fā)生改變，而原始數(shù)據(jù)obj并不會改變。
原因在于，ref的本質(zhì)是拷貝，與原始數(shù)據(jù)沒有引用關(guān)系

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

而如果使用toRef將某個對象中的屬性變成響應(yīng)式數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)是會影響到原始數(shù)據(jù)的。但是需要注意，如果修改通過toRef創(chuàng)建的響應(yīng)式數(shù)據(jù)，并不會觸發(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í)行的時候，響應(yīng)式數(shù)據(jù)發(fā)生改變，原始數(shù)據(jù)obj并不會改變，但是UI界面不會更新

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

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

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

更改person.age的值時，

通過ref(person.age)得到的age1不會改變，因為ref是復(fù)制，拷貝了一份新的數(shù)據(jù)值單獨操作, 更新時相互不影響

通過toRef(person,‘age’)得到的age2會改變，因為 toRef是引用。它為源響應(yīng)式對象上的某個屬性創(chuàng)建一個 ref對象, 二者內(nèi)部操作的是同一個數(shù)據(jù)值, 更新時二者是同步的

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

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

? ? const change1 = () => {
? ? ? person.age++
? ? };
? ? return {
? ? ? age1,
? ? ? age2,
? ? ? change1,
? ? };
? },

應(yīng)用: 當(dāng)要將 某個prop 的 ref 傳遞給復(fù)合函數(shù)時，toRef 很有用

useFeatureX函數(shù)需要使用props中的foo屬性，且foo要為ref。

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

? ? return {
? ? ? length
? ? }
? }

到此這篇關(guān)于vue3 toRef函數(shù)和toRefs函數(shù)的文章就介紹到這了,更多相關(guān)vue3 toRef和toRefs函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論