前言
Vue.js作者尤雨溪就在VueConf 上海2019後發表了關於「Vue Function-based API RFC」，那你知道什麼是Function-base嗎？
這不是跟React Hooks很像嗎？大家看到的第一感覺是這樣，但看完整篇文章之後，會發現比React Hooks更簡單且更親切了一點，Function-based的Script寫法跟原本Vue 2.x的寫法有一點不太一樣，對於原本寫習慣2.x的朋友來說可能會不習慣，但是對於初學Vue的朋友來說，學習曲線可能會更低一些而且非常好上手。
接下來我們就來看看以下的例子！
從上面代碼你會發現幾點：
- 首先是裏面會用到的函數要自己從Vue裏取出。
- data改由setup取代，setup上的屬性將會回傳到template(模板)上render（渲染）使用。
- 我們想要他創建一個新的state可以在setup()使用value函數。
- 沒有methods，不管是生命週期函數或自定義函數都會在setup之中。
看到這可能會有人開始想，我2.x都還沒有摸透，這樣大改，天啊，快學不動了，哈哈
我們先來看看作者(尤雨溪)怎麼看這次要更新的 Vue Function-based。
爲什麼作者會這樣說呢？我們來看一下簡單的Function-based跟React Hooks的差異！
Hooks 和JSX的搭配更簡潔也是它的優點之一，但是當數據被更改時，造成組件會重新渲染，產生資源的消耗，但是Function-based就不一樣，爲什麼作者會說「 Template 提供更好的靜態優化」呢？
是因爲當如果數據變化時，setup僅執行一次，而JSX每次渲染都會執行，Template(模版)不會做無謂的更新，不會進行進行渲染，在組件的更上面性能會更好！
Vue Function-based帶來什麼好處
- setup讓相關的邏輯更容易放在一起。
- state跟methods是通過變量的方式來聲明，可以大幅減少this指向的問題（在setup 內部你還是可以使用this，但大部分時候不會需要）。
- 共用組件之間的邏輯共用可以更加簡單。
- 組件的性能提升。
- 減少初學者入門學習門檻。
我們來看一下 Vue 3.0的Function-based API寫的例子。
> Vue3.0出來了嗎 !?> 還沒 !?
> 那這個例子從哪裏生出來的 !?
別緊張，聽我慢慢說，因爲我follow作者的Github，然後看到這個例子。
這個是開源社區 liximomo 大大 基於Vue 2.x的版本開發，可以讓你寫Function-based Api的擴充套件，Vue-function-api 跟Function-based的寫法幾乎一模一樣，完全可以讓你先體驗Function-based的寫法，雖然3.0還沒有發佈，但是就目前所公佈出來的相關規範及API來看，Vue-function-api 都暫時可以幫你實現Function-based的Api寫法。
沒過多久就發現 vue-function-api 就被轉移到Vue.js之下，太強了！
Vue 3.0 捨棄 Class Component
Vue 3.0 的一個主要設計目標是增強對 TypeScript 的支持，原本Vue開發團隊期望通過 Class Component來達到這個目標，但Vue開發團隊認爲 Class 並不是解決這個問題的正確路線，所以在Vue 3.0捨棄 Class Component，選擇了Function-based。
就連 React 也對於未來的進展也算是半放棄 Class Component，主推 Hooks。
Vue 2.x 到 3.0 升級須知
很多人會想說 3.0 發佈後我的項目要怎樣升級？難道要重構嗎？Vue開發團隊計劃提供2個不同的版本，兼容版本和標準版本。
- 兼容版本：同時支持 3.0 API和所有 2.x 選項。
- 標準版本：只支持 3.0 API和部分 2.x選項。
也就是說 3.0 還是可以使用 2.x的API，不過具體怎樣做還要看官方正式發佈後才知道，期待吧！
因 Vue Function-based 而被廢棄或個性的API
由於Function-based的出現，目前提案的一些 API 可能會不再被需要或是被強制修改，所以我們可以通過上面的例子來發現一些端倪。
- data
- methods
- mixins
- 所有的 lifecycle 被修改
- el
其他的提案可以看這個 global-api-change.md，目前還處於提案階段，所以正式發佈時可能還會改動！
Vue 3.0 看起來就像React，那我何不直接用React？
- Vue 3.0中template(模板)的使用跟優勢完全沒有改變（重點），React仍然使用JSX。
- Vue的漸進式的概念依然不變，門檻還是比React低。
- Vue Function-based 組件更新性能比較好。
其他更多關於 Function-based API 的問題在這個PR上面看。
最後
以上是我整理出來的 Vue 3.0 可能以及確定會更新的重點，這次 Vue Function-based的改變一定會大大影響使用 Vue 的開發者，有人覺得太接近React有點失望，有人跟我一樣很期待 Vue 3.0 的到來，Vue這次的確受到 React Hooks的啓發而開發出更好的Vue Function-based，優點互相學習改進才能讓開發者更願意去使用它，畢竟最後都是用來解決問題。
以下是我整理的一些關於Vue的學習教程！
關注公衆號：fkdcxy 瘋狂的程序員丶 獲取上圖Vue教程！
想了解更多技術知識歡迎評論區留言或私信我！