前幾天都沒再持續提到 Vue，今天來聊一下關於 Vue 3.0 與其後續發展狀況。雖然目前還是 RFC 的階段，不過，大致上走向應該已經確定了。
推薦閱讀 Kuro 的 初探 Vue 3.0 Function-based API
Function based API
如果有比較大量在 Vue 裡面寫 Mixin 的人，對於這個改變應該會比較容易接受。主要的概念就是將該在一起的東西放在一起，避免一些奇奇怪怪的狀況。而且目前官方的說法，基本上 2.x 用的元件語法在 3.0 也一樣是可以使用的（目前來說是不會改變，不用太過於擔心）。
其實官方原本的 Vue Function API ，已經被目前最新的修正案取代了，我們底下會提到，目前最新的修正案是 Composition API 。目前所有關於 Function based API 的相關 Github 都會轉向新的修正案。
import { value, computed, watch, onMounted } from 'vue'
export default {
setup () {
// reactive state
const count = value(0)
// computed state
const plusOne = computed(() => count.value + 1)
// method
const increment = () => { count.value++ }
// watch
watch(() => count.value * 2, val => {
console.log(`count * 2 is ${val}`)
})
// lifecycle
onMounted(() => {
console.log(`mounted`)
})
// expose bindings on render context
return {
count,
plusOne,
increment
}
}
}
如上述例子，所有的東西都被包含在 setup() 方法裡面，最後，再將資料返回給樣版做渲染的動作。這樣做的好處是將你的邏輯都打包在一起，也多少避免一些命名衝突之類的狀況，這裡可以舉一些簡單的例子：
import { value } from 'vue'
const myLogic = () => {
const count = value(0)
const plusOne = computed(() => count.value + 1)
const increment = () => { count.value++ }
return {
count,
plusOnt,
increment
}
}
module.exports = myLogic
import myLogic from './mylogic.js'
export default {
setup () {
const { count, plusOne, increment } from myLogic()
return {
count,
plusOne,
increment
}
}
}
這樣有理解所謂的 打包在一起 的概念了嗎？雖然說做起來跟 Mixin 的概念很類似，但是，這樣分開打包的作法，跟 Mixin 的操作邏輯還是不太相同的。實際上的實作方式，可能還是得等官方完整釋出後才知道，不過目前來說，這樣的方法還是挺方便的。就以 Mixin 而言，他比較討人厭的就是，你還是可以用元件內的方法去干涉他（也沒有不好只是， 不好說 ）。
至於 Class API 就，被廢棄了所以就不多說了。
TypeScript 支援
雖然他在 2.x 的版本也是有支援，但跟到 Flow 爛尾也實在是頗呵（ 尤大表示：呵呵，真香 ）。不過目前來說 TypeScript 的支援度應該會在 3.0 有比較好的提升，而目前 TypeScript 生態系也趨於穩定（看看 Angular 2+ 之後，強迫用 TypeScript 開發）。所以，投資在 TypeScript 還是相當不錯的。
今年鐵人賽也有 TypeScript 優質好文，強烈推薦 讓 TypeScript 成為你全端開發的 ACE！
Composition API
上面有提到了 Function based API ，而這次的 Composition API 目前來說應該是比較新的進展。同樣身為是 RFCs 來看，很多東西都還沒有一個定案。這個修正草案也是比 Function based API 還要更新的 修正案 ，所以，跟上述所提到的部分，又提出了幾項修正。
state更名為reactive。valure更名為ref，並提供isRef,toRefs方法。watch可收斂為單一函式（原本要有一個回呼函式）。computed可使用get,set。- 移除了
onBeforeCreate,onCreated生命週期的勾子。 setup可回傳一個 JSX 的渲染函式結果。
只是這邊不會太詳細的去討論這些東西，因為都還是在草案，而且目前也是不斷修正當中。如果你想要先體驗這些東西，底下就是目前相容於 Vue 2.x 的外掛，前身是 Function based API 的 Repo ，只是被官方重新指向到這裡來了（應該是換名字吧？）。
如果想體驗一下新版本的作法，歡迎各位勇者試試看：
小結
就以目前 Vue 3.x 的走向來看，大抵上就很像是 React Hook 的那種面向，只是因為現在還在草案，等到真的有一個定論的時候，大家再來看看是不是真的那麼方便吧。
不多說，我要先來去練習 TypeScript 了。
