您的👍是我們的動力來源!

最近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的朋友學習曲線可能會再更低一點，非常好上手。再這邊我整理了一些目前釋出的內容，加上自己的見解。

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

import { value, computed, watch, onMounted } from 'vue';
const App = {
  template: `
    <div id="app">
      <button @click="removeCount">count--</button>
      <span>{{count}}: {{ plusOne }}</span>
      <button @click="addCount">count++</button>
    </div>
  `,
  setup() {
    // state data
    const count = value(0);
    // computed state
    const plusOne = computed(() => `現在的數值${count.value}` );
    // add count
    const addCount = () =>  count.value++;
    // remove count
    const removeCount = () => count.value--;
    // watch
    watch(
      () => count.value,
      val =>  console.log(`現在的數值${val}`)
    );
    // lifecycle
    onMounted(() => {
      console.log(`mounted`);
    });
    return {
      count,
      plusOne,
      addCount,
      removeCount,
    };
  }
}  

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

1. 首先是你裡面會用到的函式要自己從vue裡面取出。
2. data改由setup取代， setup上的屬性將會回傳到 template(模板)上render(渲染)使用。
3. 我們想要創一個新的 state 可以在 setup() 使用 value 函數。
4. 沒有了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 提供更好的靜態優化」呢? 我個人猜測是因為當今天如果資料變動的時候，如果跟Template(模版)沒有關係的更新，它是不會進行重新渲染，在組件的更新上面效能會比較好!!!

標題快捷鍵：

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

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

我們實際來看一下 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，優點互相學習改進才會使開發者更願意去使用它，畢竟最後都是要來解決問題的 。

實際等Vue3.0發佈後我會再來做一個更詳細的教學解說，畢竟現在都只有官方發佈的部分消息，Vue-cli或Nuxt.js等更改也沒有提到太多，所以正式出來的時候想必須要花點時間學習。

【作者 Mike Cheng 成智遠】
Youtube頻道 -  一些技術的分享與教學，從網頁設計、前端開發、遊戲製作、互動體驗等等... 每個月不定時週六或日晚上直播跟技術或是經驗相關的分享，有興趣的朋友歡迎追蹤訂閱＋小鈴鐺 !
線上課程 — 現代 JavaScript 職人之路｜入門篇 
線上課程 — 現代 JavaScript 職人之路｜中階實戰篇  
線上課程 — 入門+實戰組合再送「面試篇」 
線上課程 — 職人必修的 RWD 網頁入門班 
線上課程 — JavaScript ＆ TweenMax 動態特效速成實戰
線上課程 — 超越入門！Webpack 前端自動化開發
本文經合作夥伴  Mike  授權轉載，原始文章連結。 

 【歡迎追蹤訂閱】
「HiSKIO 嗨 程式技能」科技資訊文章、實用工具分享、新課程優惠領取
「訂閱HiSKIO」定期領取實用工具、免費學習資源...等多種實用內容!  
「Hi 直播學程式」不定期專題直播
「HiSKIO youtube頻道」免費實用課程、工程師經驗分享
最懂初學者的「F5學程式」
不想一個人孤單寫 code ? 來活力滿點的「程式丼起來」加入話圈吧 !