Vue3.0改版在前，我該知道些什麼!?

Published in

I am Mike

8 min readJun 23, 2019

最近vue的3.0的消息越來越多，vue作者尤雨溪就在六月初的時候在他個人的知乎就發表了一篇關於vue3.0的更動RFC，「Vue Function-based API RFC」，這時候你心裡會想說什麼是 Function-based ?

哇靠! 這不是跟隔壁棚的React Hooks很像嗎!?
我再整篇文章看完之後，給我的感覺是比React Hooks更簡單，且更親切了一點，Function-based 的 Script 寫法跟原本 vue2.x 的寫法有一點不太一樣，對於原本寫習慣 vue2.x 的朋友來說可能會有點不太習慣，但是對於初學vue的朋友學習曲線可能會再更低一點，非常好上手。再這邊我整理了一些目前釋出的內容，加上自己的見解。

接下來我們就來看看以下的範例 !!!

從這邊開始你會發現幾點…

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

看到這邊可能會有人開始想，我2.X都還沒有摸透，你作者(尤雨溪)這樣改，天阿...快學不動了 QQ

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

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

# React Hooks 
function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <button onClick={() => setCount(count - 1)}>add</button>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>remove</button>
    </div>
  );
}# Vue Function-based
const App={
  template: `
    <div class="App">
      <button @click="addCount">add</button>
      <h2>{{count}}</h2>
      <button @click="removeCount">remove</button>
    </div>
  `,
  setup() {
      const count = value(0);
      const addCount = () => count.value++;
      const removeCount = () => count.value--;
      return {
          count,
          addCount,
          removeCount,
      }
  }
}

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

是因為當今天如果資料變動的時候，setup 僅執行一次，而jsx每次渲染都會執行，Template(模版)不會做無謂的更新，不會進行重新渲染，在組件的更新上面效能會比較好!!!

# Vue Function-based 帶來什麼樣的好處

setup 讓相關的邏輯更容易放在一起。
state跟methods是透過變數的方式來宣告，可以大幅減少this指向的問題
(在 setup 內部你還是可以使用 this，但大部分時候不會需要)
共用組件之間的邏輯共用可以更加簡單。
組件的效能提升(笑。
減少初學者開發門檻。

我們實際來看一下 Vue3.0 的 Function-based API 寫的範例

到這邊你可能驚訝!?

> Vue3.0出來了嗎 !?
> 還沒 !?
> 不然這個範例從哪邊生出來的 !?

請聽我娓娓道來... 因為我有在Follow作者的GitHub，然後有天我看到了這個

這個是開源社群 liximomo 大大所開發的基於vue2.x的版本可以讓你寫Function-based api的擴充套件，vue-function-api 跟 Function-based的寫法幾乎一模一樣，完全可以讓你先體驗Function-based的寫作方式，雖然3.0還沒有釋出，但是就目前所公布出來的相關規範以及api來看，vue-function-api 都暫時的幫你實現Function-based的api寫法。

過沒多久就發現 vue-function-api 就被轉移到Vuejs之下了，太強了！

# Vue3.0 捨棄 Class Component

vue3.0 的一個主要設計目標是增強對 TypeScript 的支持。原本vue開發團隊期望通過 Class Component來達成這個目標，但vue開發團隊認為 Class 並不是解決這個問題的正確路線，所以在vue3.0 捨棄 Class Component，選擇了Function-based。

就連 React 也對於未來的進展也算是半放棄 Class Component，主推 Hooks。

# Vue2.0 到 3.0 升級須知 !!!

很多人會想說那現在3.0出來後我的專案想升級怎麼辦? 難道要大改嗎?
在這邊vue開發團隊計劃提供2個不同的版本

兼容版本：同時支援3.0 API和所有2.x 選項。
標準版本：只支援3.0 API 和部分 2.x 選項。

也就是說 3.0之中還是可以使用 2.0的 api，不過具體怎麼做還是得看官方正式釋出後才能知道 !!!

# 因 Vue Function-based 而被廢棄或修改的API

由於Function-based的出現目前提案了一些 api 可能會不再被需要，或是被強制修改，所以我們可以透過上面的範例的發現一些端倪...

data
methods
mixins
所有的 lifecycle 被修改
el

其他的提案可以看這邊 global-api-change.md，目前這邊都還是提案階段，所以正式發佈的時候可能還會變動 !!!

# Vue 3.0 看起來就像React，那我何不乾脆使用React ?

Vue3.0中template(模板)的使用跟優勢完全沒有改變（重要）， React仍然使用JSX。
Vue的漸進式的概念依然不變，門檻還是比React低。
Vue Function-based 組件更新效能比較好。

其他更多關於 Function-based API 的問題可以再這個 PR 上面看一下

最後

以上就是我整理出來的Vue3.0可能以及確定會更新的重點，這次 Vue Function-based 的改變一定會大大影響使用 Vue 的開發者，有人覺得太接近Reactjs很失望，有人跟我一樣很雀躍的期待Vue3.0這次的升級，Vue這次的確受到了React Hooks的啟發而開發出更好的Vue Function-based，優點互相學習改進才會使開發者更願意去使用它，畢竟最後都是要來解決問題的。