使用 toRef() 將 Reactive Object 轉成 Reactive Reference | 點燈坊

若原本使用 reactive() 建立 Reactive Object，之後因需求不同想根據其 Property 建立 Reactive Reference 並維持其 Reactivity，可使用 toRef() 加以轉換。

Version

Vue 3.4

toRef()

• 經典 counter 使用 toRef() 改寫

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

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

let state = reactive({ count: 0 })

let onClick = () => {
  let count = toRef(state, 'count')
  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 = toRef(state, 'count')
  state.count = count.value + 1
}

• 使用 toRef() 直接將 state Reactive Object 的 count 取出成為 count 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

• Vue 提供了 Reactive Object 與 Reactive Reference 兩套機制，可透過 toRef() 將 Reactive Object 轉成 Reactive Reference
• toRef() 與 toRefs() 目的都是將 Reactive Object 轉成 Reactive Reference，toRef() 以 function 直接轉成 Reactive Reference，而 toRefs() 則先將每個 property 都轉成 Reactive Reference 後再以 Plain Object 呈現，因此能搭配 ES6 的 Object Destructure 使用

Reference

Vue, toRef