Vue3如何理解ref toRef和toRefs的區別

Posted on by

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的區別的文章就介紹到這瞭,更多相關Vue3 ref toRef和toRefs內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：