Hi Dai Gei Ho~ 我是Winnie～

在今天的內容中，此篇文章將要來說 Composition API，而在開始之前 我們先來看看下圖的 Before/After

而從上圖中我們可以看到，相較於左邊 Option API 各個相同程式邏輯(顏色)分散至不同屬性中， 在Vue3 的 Composition API 內的 編寫方式
主要 是 根據邏輯相關性來組織的(相同顏色一起)，也就是將 一個功能的 所有 屬性放置在同個容器之中，來做到『高內聚，低耦合』的效果。

同時 也可以讓程式碼 提高 可讀性 和 維護性，並且讓能重複被使用

ps 『高內聚，低耦合』 的意思 是元件內的資料相關性高，而元件與元件之間的相互依賴性低。

原理說完了，接著我們 來看看 Composition API 的基礎結構吧

以計數器 為例：

<tempalte>
 <div>{{count}}</div>
 <button @click="increment">+1<button/>
 <button @click="double">double<button/>
</tempalte>
<script>

//  App.vue
import { ref, computed } from "vue";
export default {
  setup() {
    const count = ref(0); // 定義Count初始值
    const double = computed(() => count.value * 2)
    const add = () =>{
     count.value ++
    }
    
    onMounted(
        console.log('i m counter')
    )
    
    return { //這裡 將方法與資料 回傳給 <template> 使用
      count,
      add,
      double
    }
  }
}
</script>

從以上程式碼中 我們可以看到，不同於 先前 Option API 寫法，setup()函式 為 Compostion API 元件 狀態或資理的主要核心 ，其中不管是 資料狀態、 computed或是生命週期等 都會在 setup()中來進行定義及處理，同時 因為沒有data 的屬性可以使用，原本的資料 初始定義 也需透過ref()/reactive來進行宣告，最後將<template> 所需要使用到的 資料 或 方法 回傳出來使用。

而這樣的程式結構，就是Composition API的編寫方式。

功能與邏輯重複使用

同時 針對功能與邏輯重複使用 Compostion API 也能有效地處理，

再以 以計數器 為例：

//Counter.js

import { ref } from 'vue';

export default function() {
   const count = ref(0);
   const double = computed(() => count.value * 2)
   const increment = () =>count.value ++ }
    
  return {
    count,
    double,
    add
  };
}

//  Component1

<script>

import Counter from './Counter.js';
import { ref, computed } from "vue";
export default {
  setup() {
     
     const {   
         count,
         double,
         add
    } = Counter();
    
    return { //這裡回傳給 <template> 使用的 資料
      count,
      add,
      double
    }
  }
}
</script>

//  Component2.vue

<script>

import Counter from './Counter.js';
import { ref, computed } from "vue";

export default {
  setup() {
     const num = ref(0)
     const add =()=>{
      num.value ++
     }
 
     const {   
         count,
         double,
         add: addCount // 因為與元件內的add方法重複了，所以換個名字
    } = Counter();
    
    return { //這裡回傳給 <template> 使用的 資料
      count,
      addCount,
      double,
      add
    }
  }
}
</script>

從上範例我們可以看到，不同於第一個計數器，我們可以將 計數器 的 相同狀態 及方法邏輯抽出來，並透過import的方式 將 相同邏輯功能 引入到各 Component1 Component2中，達到重複使用的目的，同時也可以解決 過去mixins 產生命名衝突錯誤 資料混肴不清 的問題了。

以上就是關於 Composition API 的基本介紹，而在接下來幾篇文章中，我們將 深入來介紹 Compositon API 的經常會使用到的 API使用方式。