Hi Dai Gei Ho~ 我是Winnie～

今天文章要來說的是 toRef 與 toRefs ，不知道大家記不記得在 前面的文章中 我們有說過 Composition API 中的 props 與 reactive 無法使用 直接透過ES6解構語法 來自動解構，因為這樣會導致 資料失去原本的響應功能。

示意如下：

<script>
import { reactive } from 'vue'
export default{
  setup(){
    const setCount= reactive({
      count:1,
      add: ()=> setCount.count ++
    })
    
    return {
      ...setCount
    }
  }
}
</script>

預覽：

有一句話是這麼說 ：

你不動 我不動，你一動，我還是不想動 - By 我自己

所以 針對這個問題， Vue 提供了 ## toRef 與 toRefs 兩個函式來進行 解構後同時保有響應功能 的處理。

首先我們先從 toRef開始說起：

toRef

toRef 會將 原本 響應式物件內的一個屬性抽離出來 包裝成一個 ref 的值，因為與原本對象 是連接的，所以修改時，原本的值也會跟著變動。

什麼意思？讓我們來看看以下範例：

<template>
   <div class="wrap">
     <div class="container">
       <h1>使用 toRef 測試</h1>
       {{userName}}
       <input type="text" v-model="userName">
     </div>
   </div>
</template>

<script>
import { reactive,toRef,onUpdated } from 'vue'
export default{
 setup(){
 
   const userInfo= reactive({
     name:'Winnie',
     age: 24
   })

   const userName = toRef(userInfo, 'name') //將響應物件裡的屬性抽離出來 使用

   onUpdated(()=>{
     console.log('toRef:',userName.value)  
     console.log('元物件:',userInfo.name) // 元物件內的name
   })
   return {
     userName //回傳 name屬性 給 template使用
   }
 }
}
</script>

預覽:

從上我們可以看到 userName 是 從 userInfo 中的 name 屬性抽離出來的，當傳出去給 template使用並更動它時，除了 userName的值更新了 從 console.log 也可以看userInfo.name 的值也跟著跟新了。

toRefs

toRefs 會將原本 響應式物件 轉為 普通響應式物件。其中在toRefs後的物件與值 是引用關係 且 每個值都轉為 ref 來達到 內部值 保有響應性。

...略
 setup(){
   const setCount= reactive({
     count:1,
     add: ()=> setCount.count ++
   })
   // const { count, add } = toRefs(info) 也可以這樣來解構，可以選擇要用的就好了。
   
   return {
     ...toRefs(setCount)
   }
 }

預覽：

小結：

今天想來小結以下，截止到這週有關 ref 的文章 ，目前最常用到有關ref的 API 應該就是這些了，如果大家還對其他 ref相關 的API用法 有興趣，歡迎大家 到 官方文件 來細細品嚐，

以上是今天的文章，如有問題歡迎大家多多指教，謝謝。