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

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


最近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。

大大你是撿到槍是不是XD 這樣噴www

為什麼作者會這樣說呢? 
我們來看一下簡單的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之下了,太強了!

liximomo還再去底下按讚XDDD

# 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 ? 來活力滿點的「程式丼起來」加入話圈吧 ! 
Facebook Comments