Hi Dai Gei Ho~ 我是 Winnie ～

在接下來最後三篇文章中，我們將要進入 Vue跌坑主題系列，而這系列會來介紹下 自己之前在學習Vue時所碰過的問題。
就像學騎腳踏車一樣，摔過痛過如果留下疤痕，下次在看到就會知道要怎麼避開。

在今天的文章中，要來說說 當我們要來定義資料時 是要先使用 ref 還是 reactive呢?

首先，其實這個沒有誰是絕對正確的答案，主要還是需要依照 資料狀態 來判斷使用 ：

假如 今天單純要定義一個 基本型別 的響應資料，所以很簡單的我們可以使用 接受任何型態資料的ref()來包裝，再透過.value 來讀取值。

範例如下：

  const count = ref(0); 
  const isShow = ref(false); 
  

但如果 資料 的型別為 物件 或是陣列的時候，情況又會不一樣了，先讓我們來看看以下範例

 const person1 = ref({
     name: 'winnie' 
 })
 
  const person2 = reactive({
     name: '大俠愛吃漢堡飽' 
 })
 
 onMounted(()=>{
     console.log(person1.value.name) //ref()
     console.log(person2.name) //reactive()
 })
 

從以上程式碼，我們可以看到 在語法上 ref 需要透過.value來取物件中的值，而在寫法上就需要用到三層了，而 reactive 只需用物件取值的方式，所以在寫法只需要兩層。

另外我們再來看看 以下另一個範例：

    // App.vue
    const name = ref('winnie')
    const age = ref(24)
    const address = ref('桃園')
    const setName = ()=>{
        name.value = '大俠愛吃漢堡飽'
    }
    
    
    provide('name',name)
    provide('age',age)
    provide('address',address)
    // 略..

    // user.vue

    const name=inject('name')
    const address=inject('address')
    const age=inject('age')
 
    // 略..

從上我們可以看到 當 有一筆user資料 要provide 給多個子元件引用時， 如果我們透過ref()一一來定義，好像會顯得元件中的相關資料太分散了，而且在子元件也要呼應來定義，當程式碼一多也就容易導致錯誤，易讀性變低。而如果我們改成 reactive來進行包裝的話 就可以把相關資料定義在物件之中，在provide出去，不僅很方便，同時還可以減少資料分散的問題。

範例如下：

 const userData = reactive({
    name :'winnie',
    age :24,
    address :'桃園',
 })
 provide('user',userData);

總結以上，針對兩個 響應式資料定義的方法中，以我個人選擇 ，在 單純資料狀態使用上 我會使用ref來進行響應式資料包裝，而如果是 物件或陣列 的型別 ，我多半會使用 reactive 來進行包裝，總歸一樣還是要看當下 資料狀態關聯 來選擇你要如何使用。

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

-- 小記事 --

今天無意間看了自己六年前FaceBook的動態回顧，只想對當時的我說 幸好我也沒辜負高中時的你...

最後附上 高三時 我每天反覆看的影片 陳綺貞 天天想你