簡(jiǎn)單聊聊Vue中的ref,toRef與toRefs

更新時(shí)間：2023年04月03日 14:33:41 作者：初映CY的前說(shuō)

這篇文章主要是想和大家來(lái)簡(jiǎn)單聊聊Vue中的ref、toRef、toRefs這三個(gè)函數(shù)的使用與區(qū)別，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

一、ref

ref 函數(shù)，可以把簡(jiǎn)單數(shù)據(jù)類型包裹為響應(yīng)式數(shù)據(jù)（復(fù)雜類型也可以），注意 JS 中操作值的時(shí)候，需要加 .value 屬性，模板中正常使用即可。

舉個(gè)例子：

ref包裝基本類型數(shù)據(jù)

App.vue

<template>
  <div class="container">
      <div>{{ name }}</div>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
      name: 'App',
      setup() {
          const name = ref('初映')
          const updateName = () => {
              name.value = '初映CY的前說(shuō)'
          }
          return { name, updateName }
      },
  }
</script>

可看見(jiàn)寫法與reactive()一樣，不過(guò)是在js中書寫的時(shí)候需要額外加一個(gè).value即可

ref包裝復(fù)雜類類型數(shù)據(jù)

注意：ref 其實(shí)也可以包裹復(fù)雜數(shù)據(jù)類型為響應(yīng)式數(shù)據(jù)，一般對(duì)于數(shù)據(jù)類型未確定的情況下推薦使用 ref，例如后端返回的數(shù)據(jù)。

<template>
    <div class="container">
        <div>{{ data?.name }}</div>
        <button @click="updateName">修改數(shù)據(jù)</button>
    </div>
</template>
<script>
    import { ref } from 'vue'
    export default {
        name: 'App',
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右邊的對(duì)象可能是后端返回的
                data.value = {
                    name: '初映',
                }
            }, 1000)
            const updateName = () => {
                data.value.name = 'CY'
            }
            return { data, updateName }
        },
    }
</script>

如何選擇？

ref()和reactive()都是Vue.js3.0中提供的兩個(gè)響應(yīng)式API。

ref()主要用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，它會(huì)將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為一個(gè)響應(yīng)式的對(duì)象，從而使數(shù)據(jù)的變化可以被Vue實(shí)例所追蹤，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)自動(dòng)更新相關(guān)視圖。ref()創(chuàng)建的響應(yīng)式數(shù)據(jù)可以通過(guò).value屬性來(lái)訪問(wèn)和修改。

reactive()則主要用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象，可以用作包含多個(gè)值的狀態(tài)對(duì)象，通常用于管理復(fù)雜的狀態(tài)。它可以將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為一個(gè)響應(yīng)式對(duì)象，并且支持嵌套屬性，即使嵌套屬性發(fā)生變化也會(huì)被Vue實(shí)例所追蹤。當(dāng)響應(yīng)式對(duì)象中有任何一個(gè)屬性發(fā)生變化時(shí)，Vue也會(huì)自動(dòng)更新相關(guān)的視圖。

當(dāng)你明確知道需要包裹的是一個(gè)對(duì)象，那么推薦使用 reactive，其他情況使用 ref 即可。

Vue3.2 之后，更推薦使用 ref，性能得到了很大的提升。

二、toRef

toRef 函數(shù)的作用：轉(zhuǎn)換響應(yīng)式對(duì)象中某個(gè)屬性為單獨(dú)響應(yīng)式數(shù)據(jù)，并且轉(zhuǎn)換后的值和之前是關(guān)聯(lián)的（ref 函數(shù)也可以轉(zhuǎn)換，但值非關(guān)聯(lián)）。

先看下面這個(gè)例子：

<template>
  <div class="container">
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const updateName = () => {
              obj.name = '初映CY的前說(shuō)'
          }
          return { obj, updateName }
      },
  }
</script>

這樣寫也可以將數(shù)據(jù)進(jìn)行更改成為響應(yīng)式的數(shù)據(jù)，但是帶來(lái)了兩個(gè)問(wèn)題：

問(wèn)題 1：模板中都要使用 obj. 進(jìn)行獲取數(shù)據(jù)，麻煩。

問(wèn)題 2：明明模板中只用到了 name 和 age，卻把整個(gè) obj 進(jìn)行了導(dǎo)出，沒(méi)必要，性能浪費(fèi)。

<template>
  <div class="container">
      <h2>name: {{ name }} </h2>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { reactive,toRef  } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 18,
              address: '江西',
              sex: '男',
          })
          const name = toRef(obj, 'name')
          const updateName = () => {
              obj.name = '初映CY的前說(shuō)'
          }
          return { name, updateName }
      },
  }
</script>

這樣把我們需要的數(shù)據(jù)放進(jìn)return即可，節(jié)約了性能與在模板中的寫法，有點(diǎn)點(diǎn)了‘按需導(dǎo)入’的意思

三、torefs

toRefs 函數(shù)的作用：轉(zhuǎn)換響應(yīng)式對(duì)象中所有屬性為單獨(dú)響應(yīng)式數(shù)據(jù)，并且轉(zhuǎn)換后的值和之前是關(guān)聯(lián)的。

<template>
  <div class="container">
      <h2>{{ name }} {{ age }}</h2>
      <button @click="updateName">修改數(shù)據(jù)</button>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  export default {
      name: 'App',
      setup() {
          const obj = reactive({
              name: '初映',
              age: 10,
          })
          const updateName = () => {
              obj.name = '初映CY的前說(shuō)'
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }
</script>