Day_18 : 让 Vite 来开启你的Vue 之 toRef & toRefs

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用法 有兴趣，欢迎大家 到 官方文件 来细细品嚐，

以上是今天的文章，如有问题欢迎大家多多指教，谢谢。