點燈坊

失くすものさえない今が強くなるチャンスよ

使用 toRefs() 對 Reactive Object 解構

Sam Xiao's Avatar 2024-03-18

Vue 提供了 reactive() 建立 Reactive Object，但卻無法使用 ES6 的 Object Destructure 將其解構，因此另外提出了 toRefs() 彌補此缺憾。

Version

Vue 3.4

toRefs()

torefs000

  • 經典 counter 使用 toRefs 改寫
<template>
  <button @click="onClick">+</button>
  {{ state.count }}
</template>

<script setup>
import { reactive, toRefs } from 'vue'

let state = reactive({ count: 0 })

let onClick = () => {
  let { count } = toRefs(state)
  state.count = count.value + 1
}
</script>

Line 9

let state = reactive ({ count: 0 })
  • 使用 reactive() 建立 state Reactive Object，包含 count property

Line 11

let onClick = () => {
  let { count } = toRefs(state)
  state.count = count.value + 1
}
  • 使用 toRefs() 將 state Reactive Object 轉成 Plain Object 方便解構，但每個 property 都是 Reactive Reference
  • 由於 count 為 Reactive Reference，因此需要使用 .value 解開

Best Practice

<template>
  <button @click="onClick">+</button>
  {{ state.count }}
</template>

<script setup>
import { reactive } from 'vue'

let state = reactive({ count: 0 })

let onClick = () => state.count++
</script>
  • 事實上使用 Reactive Object 時，並不一定需要解構成 Reactive Reference 才能處理，可直接使用其 property 並維持 reactivity

Conclusion

  • toRef() 與 toRefs() 目的都是將 Reactive Object 轉成 Reactive Reference，toRef() 以 function 直接轉成 Reactive Reference，而 toRefs() 則先將每個 property 都轉成 Reactive Reference 後再以 Plain Object 呈現，因此能搭配 ES6 的 Object Destructure 使用

Reference

Vue, toRefs

# Vue