本篇文章我們將來了解關於 Vue 篩寫元件的兩種方法： Option 以及 Composition 兩種API。針對個別詳細的用法與概念，將會在另外的文章呈現。
Option API 和 Composition API
Option API 是原先 Vue 2 提供的方方法，而 Vue 3 開始新增了 Composition API 的寫法。
明顯的差異
比較可見的差異就是在於程式碼的管理方式， Option API 較有明確規範，必須遵循 API 的方法定義元件。而 Composition API 可以將所需的東西都定義在 setup() 函式當中，更接近原生的 JS 寫法，也很類似 React 的 Class 以及 Functional Compoment 的差異，兩者具有了不同的篩寫風格，下面我們個別看一下實作上的不同之處。
Option API
在 Option API 當中，有幾個比較常見的屬性：
data：
響應資料的初始值
method：
元件所需使用的方法
computed：
篩寫對資料進行計算的方法
直接來看程式碼的部分，我們直要寫一個簡單的計數器：累加計算按鈕被按的次數，並計算次數的平方。
我們直接在App.vue修改：
JavaScript 部分
//<script>
import { RouterLink, RouterView } from 'vue-router'
export default{
//Option API
data() {
return { numCount: 0 }
},
computed:{
squ(){
return this.numCount*this.numCount;
}
},
methods:{
oneClick(){this.numCount = this.numCount + 1;}
}
}
//</script>OptionAPI 會依照程式碼的不同角色進行分類，要求開發者分門別類（如data）將程式碼寫在宣告好的地方。而這三者的詳細不同之處在後面的文章再來說明。
template 部分
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div>
<p>{{ numCount }}</p>
<br/>
<p>{{ squ }}</p>
<br/>
<button @click="oneClick()">+1</button>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>template 部分新增兩個 <p> 來放置次數以及次數的平方，再新增一個按鈕來呼叫次數增加的函數。
上面程式碼都完成之後，我們在終端機起動開發伺服器，輸入指令：
npm run dev然後瀏覽到 http://localhost:5173/ ，應該就可以看到這樣的效果了～
Composition API
Composition API 直接搭配 <script setup> 語法糖來篩寫程式碼的時後，可以直接將程式碼寫在當中，而不必按照 Option API 將其分門別類寫在規定的位置。我們直接來看一下如果同樣的需求之下，Composition API 如何篩寫：
Javascript 部分
//<script setup>
import { computed, ref } from '@vue/runtime-core'
import { RouterLink, RouterView } from 'vue-router'
//Composition API
const numCount = ref(0);
const oneClick = () => {numCount.value = numCount.value + 1;}
const squ = computed(() => {return numCount.value*numCount.value})
//</script>可以看出程式碼的結構相對單純，少掉了分門別類的宣告。
template 部分
無論使用哪一種寫法，在 template 的寫法皆是一致的，我們就直接沿用上面的即可。
但是細心的你一定有發現到 CompositionAPI 在變數上多使用了 ref() 這個函數，由於使用 Composition API 變數並不會自動響應，若不使用 ref() 的話當值產生變化，畫面是不會更新上去的，可以試著把 ref 拿掉後執行看看。
結論
- 兩者僅是篩寫風格的不同，並無好壞之分，得依開發團隊或個人習慣選擇
- OptionAPI 具有較嚴謹的規定，程式碼須依照其方法宣告在對應的位置
- Composition API 則更為自由，可篩寫在 scrtup setup 當中，並依照喜好自行分類，且更接近原生Javascript 的宣告方式
- Composition API 不會自動綁定響應變數，必須加上 ref() 函數；而 Option API 宣告在 data() 函數當中的值會自動綁定響應，並可以透過 this 來呼叫。
我的選擇
由於我過去前端框架主要以 React 為主，而 React 我大多使用 functional compoment 的撰寫方式來建立元件( 可以參考：ReactJS入門 － React Component 元件 本篇當中的介紹)，這與 Composition 更為相似，所以之後的文章大多都會以 Composition 的風格撰寫程式碼。
關於一些細節部分，我們留到後面文章再來詳細介紹，下一篇我們介紹元件以及元件生命週期的基本概念。
