目錄

• 一、基礎
• 1.ref
  
• 2.toRef
• 3.toRefs
• 4.最佳的使用方式
• 二、深入
• 1.為什麼需要ref
• 2.ref為什麼需要.value
• 3.為什麼需要toRef和toRefs

3中新增了幾種建立響應式資料的方法，其各自的作用當然也不盡相同，每一種方法都有其自己的應用場景，今天我們來聊聊什麼是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)
  
  rewww.cppcns.com
 
turn {
   ageRef
  }
 },}
</script>

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

(2) 可用於rewPpryactive中

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

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

<script>
import { rwww.cppcns.com
 
ef,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')
http://www.cppcns.com  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的區別的文章就介紹到這了,更多相關Vue3 ref toRef和toRefs內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！