什麼是 Composition API

Vue3中多了Composition API，Composition API 相對於 Vue2中的 Options API 更加優化了三點!

1. 增加元件的易維護性。(邏輯組織)
2. 讓功能被拆分出來並能重複使用。(邏輯複用)
3. 提高對TypeScript更好得支援度。

關於 Options API

所有功能依據程式邏輯進行拆分

在 Vue3起手式 這篇文章中，使用的方法式Options API。
Options API 通過定義 data,methods,computed,watch等屬性與方法，共同處裡頁面邏輯。
若是資料就寫在data屬性上;若是方法就寫在methods上等，依這種方式來編寫。這樣編寫的缺點就是，若元件變得複雜時，對應的屬性列表可能也會增長，這樣會讓元件變得很難閱讀和理解。
因此 Composition API 就被設計出來解決問題啦!

Composition API

Composition API 不會將功能分開依照屬性分類(也就是說不再需要寫data、methods區塊)，所有內容寫在setup()中，也就可以用功能來區分寫的區塊，甚至可以把function抽出來放在setup外面，再放到setup裡面組起來，但若有需要使用再template的方法或資料，需要用return傳出來才可以使用。

邏輯組織比較

簡易圖示表達:

Options API

若是一個大型元件，內部有很多的處理邏輯關注點，那麼看起來就會像這樣十分碎片化，很難維護與理解。當我們需要處理某個點時，必須要不斷地跳轉程式碼。

1. 邏輯配置(data/methods...)

Composition API

Composition API 將相關的程式碼都放在同一個函式中，這樣就解決的難維護與理解的問題。

1. 全部整合進setup內
2. 方便引入外部函式庫
3. 自行安排邏輯備置
4. 幾乎不會用到this

Composition API 起手式

//mainJS
import {createApp, ref, reactive, onMounted} from Vue

我們使用在OptionAPI的data``methods``mounted在Composition API中全部放在setup()。
資料需要宣告變數放入setup並透過return回傳出來，才能渲染到畫面上

資料的定義方法

關於Composition API有一點非常重要是，資料一定要使用特定方法定義才行。。
定義資料 : ref和reactive。
定義方法 : 在setup內直接將函式寫出(一樣要return回來)。
生命週期 : onMounted等。
另外還有 computed，watch

//app.vue
<script>
...
export default {
  setup() {
      const text = ref('Hello')
      const person = reactive({
          name: 'Ted'
      })
      onMounted( ()=>{ getText() } );

      function getText(){ console.log(text.value) };

      onMounted( ()=>{ getText() } );

      // computed
      const num = ref(1);
      //因為適用ref記得要用.value
      const dbNum = computed((num)=>{ return num.value * 2 })
      return{
          text,
          person,
          getText,
          num,
          dbNum
      }
  }
};
</script>

ref和reactive 的差別

reactive

1. 只能使用物件型別
2. 覆蓋後會出現不可預期的錯誤，所以建議用const宣告呦!

   const text = reactive('錯誤方式') //這個會出錯(value cannot be made reactive:錯誤方式 )
   

   const text = reactive( { name: '正確方式' })
   

ref

相對來說就沒有那麼多限制喲!

1. 不限制任何型別

   const text = ref('Bob');
   const text2 = ref({ name: 'Ted' })
   

2. 若是要在ref內存取任何值，一定要加上.value

   {{text2.value.name}}
   

   這個的好處是在於，他不會覆蓋到實體。