Vue3中toRef和toRefs函數怎麼使用

toRef 函式使用

首先呢， toRef 函式有兩個參數。

toRef(操作物件, 物件屬性)

好，接下來我們使用toRef 函數寫一個案例，還是和以前一樣，頁面展示一個使用者的名稱和年紀。

<template>
  <div>
    <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRef}}</p>
    <p>年龄：{{boy.age}}</p>
  </div>
</template>
<script>
  import { toRef } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {   // 创建一个用户对象
        name: &#39;我是????????.&#39;,   // 用户名称
        age: 10    // 用户年龄
      }
      // 使用 toRef 函数包裹，操作 boy 对象的 name 属性
      const boy_toRef = toRef(boy, &#39;name&#39;)  
      console.log(boy_toRef)  // 我们直接打印看一下包裹后的数据格式
      return { boy, boy_toRef }
    }
  }
</script>

儲存程式碼，重新整理頁面。

我們可以看到資料的結構，在value 裡面直接就是boy 下面name 的屬性值，所以說，接下來我們寫一個按鈕，點擊按鈕，修改這個name 值。

<template>
  <div>
    <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRef}}</p>
    <p>年龄：{{boy.age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRef } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
      const boy_toRef = toRef(boy, &#39;name&#39;)  
      const btn = () => {
        boy_toRef.value = &#39;????????.&#39;  // 把 name 修改成 ????????.
        console.log(boy_toRef)   // 修改完成打印一下结果
      }
      return { boy, btn, boy_toRef }
    }
  }
</script>

儲存程式碼刷新頁面，然後點擊按鈕看一下頁面效果。

透過截圖展示的效果我們可以發現，boy_toRef 的值確實被修改了，但是呢，頁面並沒有改變，而且頁面也沒有出現錯誤。

這是什麼原因呢？其實這不是Bug 哈，在本篇博文開始就說過，toRef 函數會與源數據交互，修改響應式數據會造成源數據的修改，但是他的修改不會造成視圖層數據的更新，所以說，這就是toRef 函數的功能。確實，視圖沒有資料更新我們透過上面的截圖看到了，但是來源資料修改這個怎麼看呢？沒關係，在回答這個問題之前，我們首先得知道，什麼是來源資料。

就像上面的程式碼：

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

toRef 函數將 boy 物件給包裹了起來，所以說，boy 物件就是來源資料。

因此，若想確認原始資料是否已更改，需在按鈕點擊後列印boy物件並觀察是否已更改。

<template>
  <div>
    <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRef}}</p>
    <p>年龄：{{boy.age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRef } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const boy_toRef = toRef(boy, &#39;name&#39;)  // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
      const btn = () => {
        boy_toRef.value = &#39;????????.&#39;  // 把 name 修改成 ????????.
        console.log(boy_toRef)   // 修改完成打印一下结果
        console.log(boy)   // 修改完成打印一下boy结果
      }
      return { boy, btn, boy_toRef }
    }
  }
</script>

儲存程式碼，刷新頁面，在點擊按鈕修改 name 值，然後查看控制台列印的 boy 物件。

發現boy 物件的name 值已經從 我是????????. 改為 ????? ???.了，但是頁面依舊沒有更新。

記住了！

toRef 函數會與來源資料交互，修改響應式資料會造成來源資料的修改，但是他的修改不會造成視圖層資料的更新。

ref 函數驗證

那 ref 函數可以將物件裡面的屬性值變成響應式的數據，修改響應式數據，是不會影響到來源數據，但視圖層上的資料會更新 這句話是正確的嘛？上一節我們沒測試，所以說在這裡我們也測試一下。

我們還是寫一個案例，頁面展示一個名稱，點選按鈕，修改頁面名稱。

<template>
  <div>
    <h2 id="ref-nbsp-reactive-nbsp-函数">ref reactive 函数</h2>
    <p>姓名：{{name_ref}}</p>
    <el-button type="primary" @click="btn">修改信息</el-button>
  </div>
</template>
<script>
  import { ref } from &#39;vue&#39;
  export default {
    setup() {
      const name = &#39;我是????????.&#39;
      const name_ref = ref(name)
      const btn = () => {
        name_ref.value = &#39;????????.&#39;
        console.log(name_ref)  // 打印一下被ref包裹的数据
        console.log(name)   // 打印一下源数据
      }
      return { name_ref, btn }
    }
  }
</script>

儲存程式碼，刷新頁面，點擊按鈕查看頁面控制台列印的結果，主要是看一下被ref 函數包裹後的資料有沒有修改成功，來源資料有沒有修改成功，最後頁面有沒有修改，下面看截圖。

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

所以再記得！

ref 函數可以將物件裡面的屬性值變成響應式的數據，修改響應式數據，是不會影響到來源數據，但視圖層上的數據會被更新

toRefs 函數

toRefs 函數的使用呢，其實和toRef 函數類似的哈。

• toRefs 函數用於批次設定多個資料為對應是資料。

• toRefs 函數與原始資料相交互，修改響應式資料會影響到來源數據，但不會更新視圖層。

• toRefs 函數還可以與其他響應式資料相交互，更方便處理視圖層資料。

toRefs 函數使用

老樣子，建立一個對象，然後使用 toRefs 函數包裹，在頁面展示一下。

<template>
  <div>
    <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRefs.name}}</p>
    <p>年龄：{{boy_toRefs.age}}</p>
  </div>
</template>
<script>
  import { toRefs } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const boy_toRefs = toRefs(boy)   // 将 boy 用 toRefs 包裹
      console.log(boy_toRefs)   // 打印一下结果
      return { boy_toRefs }
    }
  }
</script>

儲存程式碼，刷新頁面查看。

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

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

把視圖層程式碼修改一下，然後查看效果。

誒，現在就是正常的啦！

有人可能會疑問，那這玩意兒整的不是越來越複雜了嗎？本來直接點屬性就可以，現在還要點屬性點value，不是多此一舉，脫褲子放P嗎？嘿嘿嘿！我覺得也是。

為什麼呢說是多此一舉也很正常，因為前面的博文講過，這種複雜結構資料我們完全可以使用reactive 函數來處理呀，渲染最多點一次就可以，但是toRefs 函數卻需要點兩次。

<template>
  <div>
    <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRefs.name}}</p>
    <p>年龄：{{boy_toRefs.age}}</p>
  </div>
</template>
<script>
  import { toRefs, reactive } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const boy_toRefs = reactive(boy)
      return { boy_toRefs }
    }
  }
</script>

我们不使用 toRefs 函数，而是用之前说的 reactive 函数处理数据。

我们可以看到，页面是可以正常解析的，那为什么我们还有舍近求远的使用 toRefs 函数呢？

其实是有原因的呀！

其实 toRefs 函数最大的用处在这里！

我们这个 boy 对象里面只有两个参数比较少，如果我们这个对象里面有十个参数或者是更多的话，每次展示的时候都得写那么多遍的 boy 点，是不是很麻烦呢？所以说使用 toRefs 函数就可以解决这个问题，看下面的代码。

<template>
  <div>
    <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
  </div>
</template>
<script>
  import { toRefs } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      return { boy_toRefs , ...toRefs(boy)}
    }
  }
</script>

在 return 抛出 reactive 的时候，使用扩展运算符和 toRefs 函数，就可以实现直接写属性的方式展示数据了。

但是呢，深层次的对象依旧需要通过点来实现。

也许你还有疑问，直接扩展运算 reactive 函数也行啊，为啥要套上 toRefs 函数，记住一点呀！

toRefs 函数修改，原始数据被改变，页面不会被触发。

看下面代码：

<template>
  <div>
    <h2 id="toRef-nbsp-toRefs-nbsp-函数">toRef toRefs 函数</h2>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRefs, reactive } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const new_toRefs = toRefs(boy)

      const btn = () => {
        new_toRefs.name.value = &#39;????????.&#39;
        console.log(boy)
      }

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

打印一下结果：

从打印结果中可以看出，原始数据被改变，页面没有被触发。根据我的写法，可以发现，从解构或构建 toRefs 返回的对象，都不会对值的响应性产生影响。

以上是Vue3中toRef和toRefs函數怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！