vue3中的ref、toRef、toRefs怎么使用

這篇文章主要講解了“vue3中的ref、toRef、toRefs怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue3中的ref、toRef、toRefs怎么使用”吧！

一、ref

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

• ref包裝基本類(lèi)型數(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)寫(xiě)法與reactive()一樣，不過(guò)是在js中書(shū)寫(xiě)的時(shí)候需要額外加一個(gè).value即可。

• ref包裝復(fù)雜類(lèi)類(lèi)型數(shù)據(jù)
  注意：ref 其實(shí)也可以包裹復(fù)雜數(shù)據(jù)類(lèi)型為響應(yīng)式數(shù)據(jù)，一般對(duì)于數(shù)據(jù)類(lèi)型未確定的情況下推薦使用 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">
      <h3>name: {{ obj.name }} age: {{obj.age}}</h3>
      <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>

這樣寫(xiě)也可以將數(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">
      <h3>name: {{ name }} </h3>
      <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é)約了性能與在模板中的寫(xiě)法，有點(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">
      <h3>{{ name }} {{ age }}</h3>
      <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>

toRefs將我們所有的響應(yīng)式數(shù)據(jù)都進(jìn)行return出去了，屆時(shí)直接用上數(shù)據(jù)名稱(chēng)即可，記得加上…喔

感謝各位的閱讀，以上就是“vue3中的ref、toRef、toRefs怎么使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue3中的ref、toRef、toRefs怎么使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！