上一篇博文介紹了 vue3 里面的 ref 函數(shù)和 reactive 函數(shù)，實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)，今天主要來說一下 toRef 函數(shù)和 toRefs 函數(shù)的基本使用。

toRef 函數(shù)

通過上一篇博客，我們知道，ref 函數(shù)可以創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)，那 toRef 函數(shù)同樣也是創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)，那么他們之間的區(qū)別是什么呢？

首先一點(diǎn)，ref 函數(shù)他的本質(zhì)其實(shí)是去拷貝一份數(shù)據(jù)，脫離了與源數(shù)據(jù)的交互。什么意思呢？就是 ref 函數(shù)可以將對(duì)象里面的屬性值變成響應(yīng)式的數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)，是不會(huì)影響到源數(shù)據(jù)，但是視圖層上的數(shù)據(jù)會(huì)被更新。但是 toRefs 函數(shù)的本質(zhì)是引用，也就是說，toRef 函數(shù)會(huì)與源數(shù)據(jù)交互，修改響應(yīng)式數(shù)據(jù)會(huì)造成源數(shù)據(jù)的修改，但是他的修改不會(huì)造成視圖層數(shù)據(jù)的更新。

上面這段話理解嗎？不理解的話沒關(guān)系，下面通過幾個(gè)案例就可以明白了。

toRef 函數(shù)使用

首先呢， toRef 函數(shù)有兩個(gè)參數(shù)。

toRef(操作對(duì)象, 對(duì)象屬性)

好，接下來我們使用 toRef 函數(shù)寫一個(gè)案例，還是和以前一樣，頁面展示一個(gè)用戶的名稱和年紀(jì)。

<template>
  <div>
    <h1>toRef toRefs 函數(shù)</h1>
    <p>姓名：{{boy_toRef}}</p>
    <p>年齡：{{boy.age}}</p>
  </div>
</template>
<script>
  import { toRef } from 'vue'
  export default {
    setup() {
      const boy = {   // 創(chuàng)建一個(gè)用戶對(duì)象
        name: '我是????.',   // 用戶名稱
        age: 10    // 用戶年齡
      }
      // 使用 toRef 函數(shù)包裹，操作 boy 對(duì)象的 name 屬性
      const boy_toRef = toRef(boy, 'name')  
      console.log(boy_toRef)  // 我們直接打印看一下包裹后的數(shù)據(jù)格式
      return { boy, boy_toRef }
    }
  }
</script>

保存代碼，刷新頁面。

我們可以看到數(shù)據(jù)的結(jié)構(gòu)，在 value 里面直接就是 boy 下面 name 的屬性值，所以說，接下來我們編寫一個(gè)按鈕，點(diǎn)擊按鈕，修改這個(gè) name 值。

<template>
  <div>
    <h1>toRef toRefs 函數(shù)</h1>
    <p>姓名：{{boy_toRef}}</p>
    <p>年齡：{{boy.age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRef } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      // 這個(gè) boy_toRef 就是被 toRef 函數(shù)操作過的 boy 的 name 值
      const boy_toRef = toRef(boy, 'name')  
      const btn = () => {
        boy_toRef.value = '????.'  // 把 name 修改成 ????.
        console.log(boy_toRef)   // 修改完成打印一下結(jié)果
      }
      return { boy, btn, boy_toRef }
    }
  }
</script>

保存代碼刷新頁面，然后點(diǎn)擊按鈕看一下頁面效果。

通過截圖展示的效果我們可以發(fā)現(xiàn)，boy_toRef 的值確實(shí)被修改了，但是呢，頁面并沒有改變，而且頁面也沒有出現(xiàn)錯(cuò)誤。

這是什么原因呢？ 其實(shí)這不是 Bug 哈，在本篇博文開始就說過，toRef 函數(shù)會(huì)與源數(shù)據(jù)交互，修改響應(yīng)式數(shù)據(jù)會(huì)造成源數(shù)據(jù)的修改，但是他的修改不會(huì)造成視圖層數(shù)據(jù)的更新，所以說，這就是 toRef 函數(shù)的功能。確實(shí)，視圖沒有數(shù)據(jù)更新我們通過上面的截圖看到了，但是源數(shù)據(jù)修改這個(gè)怎么看呢？沒關(guān)系，在回答這個(gè)問題之前，我們首先得知道，什么是源數(shù)據(jù)。

就像上面的代碼：

const boy = {
  name: '我是????.',
  age: 10
}
const boy_toRef = toRef(boy, 'name')

toRef 函數(shù)將 boy 對(duì)象給包裹了起來，所以說，boy 對(duì)象就是源數(shù)據(jù)。

所以說，想知道源數(shù)據(jù)有沒有改變，在點(diǎn)擊按鈕之后，打印一下 boy 對(duì)象，看一下 boy 有沒有被改變。

<template>
  <div>
    <h1>toRef toRefs 函數(shù)</h1>
    <p>姓名：{{boy_toRef}}</p>
    <p>年齡：{{boy.age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRef } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      const boy_toRef = toRef(boy, 'name')  // 這個(gè) boy_toRef 就是被 toRef 函數(shù)操作過的 boy 的 name 值
      const btn = () => {
        boy_toRef.value = '????.'  // 把 name 修改成 ????.
        console.log(boy_toRef)   // 修改完成打印一下結(jié)果
        console.log(boy)   // 修改完成打印一下boy結(jié)果
      }
      return { boy, btn, boy_toRef }
    }
  }
</script>

保存代碼，刷新頁面，在點(diǎn)擊按鈕修改 name 值，然后查看一下控制臺(tái)打印的 boy 對(duì)象。

發(fā)現(xiàn) boy 對(duì)象的 name 值已經(jīng)從 我是????. 改為 ????.了，但是頁面依舊沒有更新。

記住了！

toRef 函數(shù)會(huì)與源數(shù)據(jù)交互，修改響應(yīng)式數(shù)據(jù)會(huì)造成源數(shù)據(jù)的修改，但是他的修改不會(huì)造成視圖層數(shù)據(jù)的更新。

ref 函數(shù)驗(yàn)證

那 ref 函數(shù)可以將對(duì)象里面的屬性值變成響應(yīng)式的數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)，是不會(huì)影響到源數(shù)據(jù)，但是視圖層上的數(shù)據(jù)會(huì)被更新 這句話是正確的嘛？上一節(jié)我們沒測(cè)試，所以說在這里我們也測(cè)試一下。

我們還是寫一個(gè)案例，頁面展示一個(gè)名稱，點(diǎn)擊按鈕，修改頁面名稱。

<template>
  <div>
    <h1>ref reactive 函數(shù)</h1>
    <p>姓名：{{name_ref}}</p>
    <el-button type="primary" @click="btn">修改信息</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const name = '我是????.'
      const name_ref = ref(name)
      const btn = () => {
        name_ref.value = '????.'
        console.log(name_ref)  // 打印一下被ref包裹的數(shù)據(jù)
        console.log(name)   // 打印一下源數(shù)據(jù)
      }
      return { name_ref, btn }
    }
  }
</script>

保存代碼，刷新頁面，點(diǎn)擊按鈕查看頁面控制臺(tái)打印的結(jié)果，主要是看一下被 ref 函數(shù)包裹后的數(shù)據(jù)有沒有修改成功，源數(shù)據(jù)有沒有修改成功，最后頁面有沒有修改，下面看截圖。

OK，通過上面截圖，顧忌大家都理解了吧！

所以再記住！

ref 函數(shù)可以將對(duì)象里面的屬性值變成響應(yīng)式的數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)，是不會(huì)影響到源數(shù)據(jù)，但是視圖層上的數(shù)據(jù)會(huì)被更新

toRefs 函數(shù)

toRefs 函數(shù)的使用呢，其實(shí)和 toRef 函數(shù)類似的哈。

• toRefs 函數(shù)用于批量設(shè)置多個(gè)數(shù)據(jù)為相應(yīng)是數(shù)據(jù)。
• toRefs 函數(shù)與原始數(shù)據(jù)相交互，修改響應(yīng)式數(shù)據(jù)會(huì)影響到源數(shù)據(jù)，但是不會(huì)更新視圖層。
• toRefs 函數(shù)還可以與其他響應(yīng)式數(shù)據(jù)相交互，更加方便處理視圖層數(shù)據(jù)。

toRefs 函數(shù)使用

老樣子，創(chuàng)建一個(gè)對(duì)象，然后使用 toRefs 函數(shù)包裹，在頁面展示一下。

<template>
  <div>
    <h1>toRef toRefs 函數(shù)</h1>
    <p>姓名：{{boy_toRefs.name}}</p>
    <p>年齡：{{boy_toRefs.age}}</p>
  </div>
</template>
<script>
  import { toRefs } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      const boy_toRefs = toRefs(boy)   // 將 boy 用 toRefs 包裹
      console.log(boy_toRefs)   // 打印一下結(jié)果
      return { boy_toRefs }
    }
  }
</script>

保存代碼，刷新頁面查看。

所以說，我們修改修改一下代碼，在渲染的時(shí)候除了 .屬性 之外，還需要 .value。

    <p>姓名：{{boy_toRefs.name.value}}</p>
    <p>年齡：{{boy_toRefs.age.value}}</p>

把視圖層代碼修改一下，然后查看效果。

誒，現(xiàn)在就是正常的啦！

有人可能會(huì)疑問，那這玩意兒整的不是越來越復(fù)雜了嗎？本來直接點(diǎn)屬性就可以，現(xiàn)在還得點(diǎn)屬性點(diǎn)value，不是多此一舉，脫褲子放P嗎？ 嘿嘿嘿！我覺得也是。

為什么呢說是多此一舉也很正常，因?yàn)榍懊娴牟┪闹v過，這種復(fù)雜結(jié)構(gòu)數(shù)據(jù)我們完全可以使用 reactive 函數(shù)來處理呀，渲染最多點(diǎn)一次就可以，但是 toRefs 函數(shù)卻需要點(diǎn)兩次。

<template>
  <div>
    <h1>toRef toRefs 函數(shù)</h1>
    <p>姓名：{{boy_toRefs.name}}</p>
    <p>年齡：{{boy_toRefs.age}}</p>
  </div>
</template>
<script>
  import { toRefs, reactive } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      const boy_toRefs = reactive(boy)
      return { boy_toRefs }
    }
  }
</script>

我們不使用 toRefs 函數(shù)，而是用之前說的 reactive 函數(shù)處理數(shù)據(jù)。

我們可以看到，頁面是可以正常解析的，那為什么我們還有舍近求遠(yuǎn)的使用 toRefs 函數(shù)呢？

其實(shí)是有原因的呀！

其實(shí) toRefs 函數(shù)最大的用處在這里！

我們這個(gè) boy 對(duì)象里面只有兩個(gè)參數(shù)比較少，如果我們這個(gè)對(duì)象里面有十個(gè)參數(shù)或者是更多的話，每次展示的時(shí)候都得寫那么多遍的 boy 點(diǎn)，是不是很麻煩呢？所以說使用 toRefs 函數(shù)就可以解決這個(gè)問題，看下面的代碼。

<template>
  <div>
    <h1>toRef toRefs 函數(shù)</h1>
    <p>姓名：{{name}}</p>
    <p>年齡：{{age}}</p>
  </div>
</template>
<script>
  import { toRefs } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      return { boy_toRefs , ...toRefs(boy)}
    }
  }
</script>

在 return 拋出 reactive 的時(shí)候，使用擴(kuò)展運(yùn)算符和 toRefs 函數(shù)，就可以實(shí)現(xiàn)直接寫屬性的方式展示數(shù)據(jù)了。

但是呢，深層次的對(duì)象依舊需要通過點(diǎn)來實(shí)現(xiàn)。

也許你還有疑問，直接擴(kuò)展運(yùn)算 reactive 函數(shù)也行啊，為啥要套上 toRefs 函數(shù)，記住一點(diǎn)呀！

toRefs 函數(shù)修改，原始數(shù)據(jù)被改變，頁面不會(huì)被觸發(fā)。

看下面代碼：

<template>
  <div>
    <h1>toRef toRefs 函數(shù)</h1>
    <p>姓名：{{name}}</p>
    <p>年齡：{{age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRefs, reactive } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      const new_toRefs = toRefs(boy)

      const btn = () => {
        new_toRefs.name.value = '????.'
        console.log(boy)
      }

      return { btn, ...toRefs(boy) }
    }
  }
</script>

打印一下結(jié)果：

從打印結(jié)果中可以看出，原始數(shù)據(jù)被改變，頁面沒有被觸發(fā)。但從我的寫法上應(yīng)該可以注意到，toRefs 返回的對(duì)象，隨便解、隨便構(gòu)，絲毫不會(huì)影響值的響應(yīng)性。

總結(jié)

有的小伙伴可能還是不太理解這兩個(gè)函數(shù)，稍微總結(jié)一下子。

• 如果想讓響應(yīng)式數(shù)據(jù)和以前的數(shù)據(jù)關(guān)聯(lián)起來，并且想在更新響應(yīng)式數(shù)據(jù)的時(shí)候不更新視圖，那么就使用 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ù)用于批量設(shè)置多個(gè)數(shù)據(jù)為響應(yīng)式數(shù)據(jù)。因?yàn)?toRef 函數(shù)一次僅能設(shè)置一個(gè)數(shù)據(jù)。
• toRefs 函數(shù)接收一個(gè)對(duì)象作為參數(shù)，它會(huì)遍歷對(duì)象身上的所有屬性，然后挨個(gè)調(diào)用 toRef 函數(shù)執(zhí)行。

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

最新評(píng)論