Hi Dai Gei Ho~ 我是Winnie～

在今天的內容中，我們要來說的是 Composition API 的 Setup()

Setup()

setup函式 為 Composition API 啟動元件的初始入口位置，而在其函式內通常 會包含 生命週期hook、狀態資料 計算屬性 等。最後 再將模板需要使用 的 狀態及功能 回傳出來給template就可以了。

其中 在元件內的 功能邏輯與資料狀態 其實 不一定 要全寫在setup內，可以依照 情境需求 適時地抽出來，當需要使用時 再import進來使用即可， 而這樣做的好處 主要是可以讓元件內的 setup函式減少變成 麵條程式碼 的機率，更利於 程式碼閱讀及維護。

麵條程式碼是什麼 ？
簡單來說 就是 程式碼 像麵條一樣雜亂交錯，完全無法看出程式的脈絡。

setup中的參數 props/context

當元件啟動時，在setup函式中會分別帶入 props 與 context兩個參數。

props

props 是什麼？相信應該到這邊大家都蠻熟的了，如果不熟的捧由 可以看看官網文件或是 指路 Kuro大大 的008 Vue props 的這篇

那在setup中要如何使用呢？再指路..喂 不對，回來

以下程式碼為例：

export default {
  props: {
    name: String
  },
  setup(props) {
  //const { name } = props 不可以這樣喔！
    console.log(props.name)
  }
}

從上我們可以看到，因為沒有this可以使用，所以 setup 透過 參數傳遞 props物件 來供內部 函式使用。

而這邊注意的是 由於props中的資料是響應式的，所以要取出props內的資料不能直接使用ES6解構， 這樣會造成 props 的 響應消失，如需要解構使用，我們可以透過 Vue3新增的 API toRefs方法來完成此目的。(之後文章會介紹 什麼是 toRefs)

context

而 setup 函數傳遞的第二個參數就是 context物件，而在Context物件內含有 attrs、slots、emitAPI，而與props不同地方的是，因為 context 只是一個普通的JS 物件，不是響應式的，所以針對其 可以ES6解構來進行使用

export default {
  props: {
    name: String
  },
  setup(props,{attrs,slots,emit}) {
  //const { name } = props 不可以這樣喔，需透過toRefs！
    console.log(props.name) 
    .... 略
  }
}

生命週期 Hook

從上生命週期hook 對照圖我們可以發現，在 過去的 created 與 beforeCreate 被 setup 所取代了，這是為什麼呢？

針對這個疑問，文件是這樣說明的：

在新式setup 函數執行時機 主要是 介於 beforeCreate、created 兩者之間，因此就不需要再特地來定義他們，直接由 setup 來取代即可。而這也表示，在 created 之後的 生命週期鉤子(onMounted、onUpdated 等) 都應該在 setup()中來編寫。

另外 需注意的地方，相較於過去 生命週期hooks的寫法，在Composition API 部分 生命週期鉤子名稱有所更改，在部分前方加上 on 來使用 (如：updated ----> onUpdated)

而其用法如下：

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {  // 使用的方式改為函數式的方式來使用
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

以上 就是關於 Composition API Setup函式 使用的介紹，而預告下篇將會(硬要 江蕙？)來介紹 Vue3 中的 ref() 是什麼 及 如何使用。 謝謝大家，如有問題歡迎各位多多指教。