Vue3.0即將到來，你準備好了麼？對於有些人可能是噩夢！哈哈哈

前言

Vue.js作者尤雨溪就在VueConf 上海2019後發表了關於「Vue Function-based API RFC」，那你知道什麼是Function-base嗎？

這不是跟React Hooks很像嗎？大家看到的第一感覺是這樣，但看完整篇文章之後，會發現比React Hooks更簡單且更親切了一點，Function-based的Script寫法跟原本Vue 2.x的寫法有一點不太一樣，對於原本寫習慣2.x的朋友來說可能會不習慣，但是對於初學Vue的朋友來說，學習曲線可能會更低一些而且非常好上手。

接下來我們就來看看以下的例子！

從上面代碼你會發現幾點：

1. 首先是裡面會用到的函數要自己從Vue裡取出。
2. data改由setup取代，setup上的屬性將會回傳到template(模板)上render（渲染）使用。
3. 我們想要他創建一個新的state可以在setup()使用value函數。
4. 沒有methods，不管是生命週期函數或自定義函數都會在setup之中。

看到這可能會有人開始想，我2.x都還沒有摸透，這樣大改，天啊，快學不動了，哈哈

我們先來看看作者(尤雨溪)怎麼看這次要更新的 Vue Function-based。

為什麼作者會這樣說呢？我們來看一下簡單的Function-based跟React Hooks的差異！

Hooks 和JSX的搭配更簡潔也是它的優點之一，但是當數據被更改時，造成組件會重新渲染，產生資源的消耗，但是Function-based就不一樣，為什麼作者會說「 Template 提供更好的靜態優化」呢？

是因為當如果數據變化時，setup僅執行一次，而JSX每次渲染都會執行，Template(模版)不會做無謂的更新，不會進行進行渲染，在組件的更上面性能會更好！

Vue Function-based帶來什麼好處

1. setup讓相關的邏輯更容易放在一起。
2. state跟methods是通過變量的方式來聲明，可以大幅減少this指向的問題（在setup 內部你還是可以使用this，但大部分時候不會需要）。
3. 共用組件之間的邏輯共用可以更加簡單。
4. 組件的性能提升。
5. 減少初學者入門學習門檻。

我們來看一下 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的學習教程，歡迎私信我領取！

想了解更多技術知識歡迎評論區留言或私信我！