Hi Dai Gei Ho~ 我是Winnie～

在今天文章中，我們要來說的是Compostion API 中的 ref 與reactive。而 在開始之前，我們先來回憶過去～ Option API 是如何來定義資料狀態的:

// 以 Vue3 option API 中的 data 寫法為主
<template>
 <h1>Hi!I am {{ name }}</h1>
</template>

<script>
 export default {
   data() {
     return {
       name: "Winnie"
     };
   }
 };
</script>

從上程式碼我們可以看到，過去會透過 Vue Instance中 的data的屬性，來 定義資料狀態或著方法 ，而 data 本會身是一個 回傳object 的 function，接著我們就可以在 模板(template) 或著 其他屬性中來使用。

而針對 data 中內部 資料狀態 的響應 ，Vue 是採去 object.definePropertity 的 方式，透過創建 getter與 setter 來追蹤資料狀態的變化。

MDN 在線解釋：

Object.defineProperty 為 直接對一個物件定義、或是修改現有的屬性，再執行後會回傳定義完的物件。

ref 與 reactive

而到了 Composition API ，沒有了 data屬性來定義資料，取而代之的則是 ref 與 reactive兩個函式 來進行 資料狀態定義(一直擔心接不回來，幸好接回來了)，

究竟這兩個 如何使用呢？ 我們來看看吧 :

ref

在ref()函式中可以接受一個任何基本型別的參數，且會回傳一個響應式物件(更正ref 也是被 ES6 proxy 所代理 )。而在這物件之中會提供一個.value 屬性來更新或讀取資料內的狀態。

但是 當今天 資料狀態 需回傳給 模板(template) 使用 ，此時透過ref包裝後的物件就不用再透過.value 屬性來取值了，直接使用名稱來使用即可。

好像有點饒口，我們來看看以下範例：

<template>
 <div> Wow！{{name}}</div>
 <img src="https://i.imgur.com/GPIayCC.jpg" alt="Wow！Jennifer Lopez" width="500" height="600">
<template/>
 <script>
 
 import { ref } from vue;
 
 export default {
  setup(){
    const name = ref('Jennifer Lopez'); 
    console.log(name) // 回傳一個RefImpl 物件
    console.log(name.value) // Jennifer Lopez
    
    return { name }
    
 }
 </script>

reactive

reactive 為 Composition API 定義資料狀態的另一個函式，其中 reactive() 只接受 物件 及 陣列 型別的參數，最後會回傳一個 被ES6 Proxy所代理過的物件，達到響應式的更新，而其中 要讀取或更新其資料的方式 就不需透過.value 來取值了

ES6 Proxy 是什麼？
主要是作為指定物件的代理，可以改寫、偵聽物件的存取與操作 (先向自己許願XD，希望之後自己可以認真點 再番外寫一篇關於 ES6 Proxy)

使用方式如下：

 <template>
 <div>{{setCount.count}}<div/>
 <button @click="setCount.plus"></button>
 <template/>
 <script>
 import { reactive } from vue;
 
 export default {
  setup(){
    const setCount = reactive({
        count:1,
        plus: setCount.count ++
    }); 
    
    console.log(setCount.count) //1
    
    return {
      setCount
    }
 }
 </script>

這邊注意 reactive 回傳給template 的物件，不能直接使用 ES6 來解構，因為 ES6 解構語法 會將 被包裝後的響應式功能給抽離出來，失去響應功能，這與昨天我們說的props一樣 需透過 toRefs來進行處理 (後續有一篇關於 toRefs的介紹，再請各位稍等)

以上 就是關於 Composition API ref與 reactive 資料定義的介紹，如有問題歡迎各位多多指教，謝謝大家。