Vue3中ref?toRef和toRefs的區別有哪些

這篇文章主要為大家展示了“Vue3中ref toRef和toRefs的區別有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue3中ref toRef和toRefs的區別有哪些”這篇文章吧。

一、基礎

1.ref

(1) 生成值類型的響應式數據, 通過 .value修改值

<template>
 <div>{{ ageRef }}</div>
</template>

<script>
import { ref } from 'vue'
export default {
 setup() {
  const ageRef = ref(20)

  setInterval(() => {
   ageRef.value += 1
  }, 1000)
  
  return {
   ageRef
  }
 },
}
</script>

上面這段代碼,定義了一個ageRef變量,并每秒將ageRef加1,頁面展示的數值也會加1.

(2) 可用于reactive中

將上面的代碼改動如下, 引入reactive定義變量,將ref定義的變量引入reactive中, 模板中展示reactive的變量. 最后的效果和上面(1)的一樣

<template>
 <div>{{ info.age }}</div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
 setup() {
  const ageRef = ref(20)
  const info = reactive({
   age: ageRef
  })
  setInterval(() => {
   ageRef.value += 1
  }, 1000)
  
  return {
   info
  }
 },
}
</script>

(3) 可用于獲取Dom

<template>
 <div ref="eleDom">ref-dom-test</div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
 setup() {
  const eleDom = ref(null)
  onMounted(() => {
   console.log(eleDom.value.innerHTML) // ref-dom-test
  })
  return {
   eleDom 
  }
 },
}

上面代碼控制臺輸出ref-dom-test, 說明獲取到了Dom元素.
要獲取Dom元素必須要符合以下規則

定義的ref變量名必須要和模板中ref中的值一致,如代碼中的eleDom

2.toRef

• 針對一個響應式對象的prop

• 創建一個ref，具有響應式

• 兩者保持引用關系

我們來看下面這段代碼

<template>
 <div>{{ state.age }} --- {{ ageRef }}</div>
</template>

<script>
import { toRef, reactive } from 'vue'
export default {
 setup() {
  const state = reactive({
   name: 'JL',
   age: 18
  })
  const ageRef = toRef(state, 'age')
  setTimeout(() => {
   state.age = 20
  }, 1000)
  
  setTimeout(() => {
   ageRef.value = 21
  }, 2000)
  
  return {
   state,
   ageRef
  }
 },
}
</script>

上面的代碼中，使用toRef將state的age屬性變成一個響應式變量，然后在1秒后將state的age值變為20，此時ageRef也會變成20；在2秒后將ageRef的值變為21，此時state的age值也會變成21，說明了兩者保持相互引用關系

toRef針對的是響應式，針對的不是普通對象，如果用于非響應式，產出的結果不具有響應式

3.toRefs

• 將一個響應式對象轉為普通對象

• 對象的每一個屬性都是對應的ref

• 兩者保持引用關系

我們來看下面這段代碼

<template>
 <div>{{ name }}---{{ age }}</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
 setup() {
  const state = reactive({
   name: 'JL',
   age: 18
  })

  const stateRefs = toRefs(state)

  setTimeout(() => {
   state.age = 20
  }, 1000)

  setTimeout(() => {
   stateRefs.age.value = 21
  }, 2000)

  return stateRefs
 },
}
</script>

上面的代碼中，使用toRefs將state轉變成一個普通對象，這時候就可以直接返回stateRefs，這時候在template就可以直接調用name和age。然后在1秒后將state的age值變為20，此時頁面中的age也會變成20；在2秒后將stateRefs中的name的值變為21，此時頁面中的age值也會變成21，說明了兩者保持相互引用關系

toRefs將響應式對象變成普通對象后，每一個屬性都具有響應式ref，此時需要使用 .value才能獲取其值

4.最佳的使用方式

• reactive做對象的響應式，ref做值類型響應式

• setup中返回toRefs(state), 或者toRef(state, 'xxx')---(這樣就能夠在template中不使用state.xxx)

• ref的變量命名都用xxxRef

• 合成函數返回響應式對象時，使用toRefs

例如：

<template>
 <div>x:{{x}} y:{{y}}</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
 setup() {
  function test() {
   const state = reactive({
    x: 1,
    y: 2
   })
   return toRefs(state)
  }
  const {x, y} = test()

  setTimeout(() => {
   x.value = 2
  }, 1000)

  return {
   x,
   y
  }
 }
}
</script>

上面的代碼，test函數中定義了響應式對象state，并通過toRefs將其轉為普通對象并返回，這時候可以結構賦值，并且值是響應式的

二、深入

1.為什么需要ref

在上面我們講到，使用reactive和toRef也可以將值類型轉換成響應式的，為什么還需要ref呢？

• 值類型不具有響應式（proxy）

• setup()、computed()...都可能返回值類型,如果vue不定義ref,用戶需要響應式的值類型的時候就會通過其他方式(reactive/toRef, reactive/toRefs)自造ref,就會造成代碼更混亂

2.ref為什么需要.value

ref為什么需要加一個.value來獲取值呢?為什么要這么麻煩呢?

• ref是一個對象(不會丟失響應式),value存儲值

• 通過.value屬性的get和set來實現響應式

• 用于reactive和模板(vue編譯)的時候不需要.value,其他情況都需要

3.為什么需要toRef和toRefs

• 初衷: 在不丟失響應式的前提下,對對象數據進行解構

• 前提: 針對的是響應式對象,不是普通對象

• 結果: 不創造響應式,只延續響應式

以上是“Vue3中ref toRef和toRefs的區別有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！