一文聊聊vue3中的ref、toRef、toRefs

這篇文章帶大家深入聊聊vue3專案中關於ref、toRef、toRefs的使用方法，希望對大家有幫助！

一、ref

#ref 函數，可以把簡單資料型別包裹成響應式資料（複雜型別也可以），注意JS 中操作值的時候，需要加.value 屬性，模板中正常使用即可。
舉個例子：

• ref包裝基本型別資料
  App.vue

<template>
  <div>
      <div>{{ name }}</div>
      <button>修改数据</button>
  </div></template><script>
  import { ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const name = ref(&#39;初映&#39;)
          const updateName = () => {
              name.value = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

可看見寫法與reactive()一樣，不過是在js中書寫的時候需要額外加一個.value即可。 【相關推薦：vuejs影片教學、web前端開發】

• #ref包裝複雜類別類型資料
  注意：ref 其實也可以包裹複雜數據類型為響應式數據，一般對於數據類型未確定的情況下建議使用ref，例如後端回傳的數據。

<template>
    <div>
        <div>{{ data?.name }}</div>
        <button>修改数据</button>
    </div></template><script>
    import { ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: &#39;初映&#39;,
                }
            }, 1000)
            const updateName = () => {
                data.value.name = &#39;CY&#39;
            }
            return { data, updateName }
        },
    }</script>

• #如何選擇？
  ref()和reactive()都是Vue.js3.0提供的兩個響應式API。
  ref()主要用於創建一個響應式數據，它會將一個普通的JavaScript對象轉換為一個響應式的對象，從而使數據的變化可以被Vue實例所追踪，當數據發生變化時，Vue會自動更新相關視圖。 ref()所建立的響應式資料可以透過.value屬性來存取和修改。
  reactive()則主要用於建立一個響應式對象，可以用作包含多個值的狀態對象，通常用於管理複雜的狀態。它可以將一個普通的JavaScript物件轉換為一個響應式對象，並且支援嵌套屬性，即使嵌套屬性發生變化也會被Vue實例所追蹤。當響應式物件中有任何一個屬性變更時，Vue也會自動更新相關的視圖。
  當你明確知道需要包裹的是一個對象，那麼建議使用 reactive，其他情況使用 ref 即可。
  Vue3.2 之後，更建議使用 ref，效能得到了很大的提升。

二、toRef

toRef 函數的作用：轉換響應式物件中某個屬性為單獨響應式數據，並且轉換後的值和之前是關聯的（ref 函數也可以轉換，但值非關聯）。
先看下面這個範例：

<template>
  <div>
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { obj, updateName }
      },
  }</script>

這樣寫也可以將資料進行更改成為響應式的數據，但是帶來了兩個問題：

• #問題1：模板中都要使用obj. 進行取得數據，很麻煩。

• 問題 2：明明模板中只用到了 name 和 age，卻把整個 obj 進行了導出，沒必要，效能浪費。

<template>
  <div>
      <h2>name: {{ name }} </h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive,toRef  } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const name = toRef(obj, &#39;name&#39;)
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

這樣把我們需要的資料放進return即可，節約了性能與在模板中的寫法，有點點了'按需導入'的意思

三、torefs

toRefs 函數的作用：轉換響應式物件中所有屬性為單獨響應式數據，並且轉換後的值和之前是關聯的。

<template>
  <div>
      <h2>{{ name }} {{ age }}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 10,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs將我們所有的響應式資料都進行return出去了，屆時直接用上資料名稱即可，記得加上…喔

據。話不多說,讓我們來學習下這三個方法怎麼用，以及與reactive的差別。

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是一文聊聊vue3中的ref、toRef、toRefs的詳細內容。更多資訊請關注PHP中文網其他相關文章！