讀 Vue3 Composition API 筆記 1

 一個用來處理組件共用狀態與邏輯的功能，是前端在工作時必備的，例如登入後要把登入狀態跟一些環境變數給予大部分的組件，或開發新的功能要在多個平行組件上運作，如果一層一層傳遞一是麻煩，二是要改 Code 追蹤的時候很痛苦，在 React 是使用 Context 或 Redux ，Vue 是 Vuex，原理都是創建一個 Store ，Store 儲存 State 與 Dispatch，例如登入與否，State:{ isLogin: false }，Dispatch 就會是一個更新 State 的 function，如 dispatch({ type:isLogin , data:true})，再透過 reducer 去更新 State 使狀態發生改變，意義在於使共用狀態與邏輯是可追蹤的，方便知道哪些組件會更改，以及除錯會比較方便。

在 Vue 3 中，綁定需要加上 ref ，例如： const isLogin = ref ( false ) ，因為原始型別與物件型別在傳值與傳參考的反應不同。Vue 2 升級 Vue 3 時，生命週期可以由 vue import，mount 改成 onMounted，watch(觀察對象, callback , option)，剩下的下集再續。

setup () {

   const isLogin = ref ( false )

   onMounted(()=>{

     dispatch()

})

}

參考資料：

Vue3文件 

Kuro 在大神來六角的解說