部落格同步刊登 [IT 鐵人賽] 下一個 VueJS 3.0 Day 29

前幾天都沒再持續提到 Vue，今天來聊一下關於 Vue 3.0 與其後續發展狀況。雖然目前還是 RFC 的階段，不過，大致上走向應該已經確定了。

推薦閱讀 Kuro 的 初探 Vue 3.0 Function-based API

Function based API

如果有比較大量在 Vue 裡面寫 Mixin 的人，對於這個改變應該會比較容易接受。主要的概念就是將該在一起的東西放在一起，避免一些奇奇怪怪的狀況。而且目前官方的說法，基本上 2.x 用的元件語法在 3.0 也一樣是可以使用的（目前來說是不會改變，不用太過於擔心）。

其實官方原本的 Vue Function API ，已經被目前最新的修正案取代了，我們底下會提到，目前最新的修正案是 Composition API 。目前所有關於 Function based API 的相關 Github 都會轉向新的修正案。

import { value, computed, watch, onMounted } from 'vue'

export default {
  setup () {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}

如上述例子，所有的東西都被包含在 setup() 方法裡面，最後，再將資料返回給樣版做渲染的動作。這樣做的好處是將你的邏輯都打包在一起，也多少避免一些命名衝突之類的狀況，這裡可以舉一些簡單的例子：

import { value } from 'vue'

const myLogic = () => {
  const count = value(0)
  const plusOne = computed(() => count.value + 1)
  const increment = () => { count.value++ }
  
  return {
    count,
    plusOnt,
    increment
  }
}

module.exports = myLogic

import myLogic from './mylogic.js'

export default {
  setup () {
    const { count, plusOne, increment } from myLogic()
    
    return {
      count,
      plusOne,
      increment
    }
  }
}

這樣有理解所謂的 打包在一起 的概念了嗎？雖然說做起來跟 Mixin 的概念很類似，但是，這樣分開打包的作法，跟 Mixin 的操作邏輯還是不太相同的。實際上的實作方式，可能還是得等官方完整釋出後才知道，不過目前來說，這樣的方法還是挺方便的。就以 Mixin 而言，他比較討人厭的就是，你還是可以用元件內的方法去干涉他（也沒有不好只是， 不好說 ）。

至於 Class API 就，被廢棄了所以就不多說了。

TypeScript 支援

雖然他在 2.x 的版本也是有支援，但跟到 Flow 爛尾也實在是頗呵（ 尤大表示：呵呵，真香 ）。不過目前來說 TypeScript 的支援度應該會在 3.0 有比較好的提升，而目前 TypeScript 生態系也趨於穩定（看看 Angular 2+ 之後，強迫用 TypeScript 開發）。所以，投資在 TypeScript 還是相當不錯的。

今年鐵人賽也有 TypeScript 優質好文，強烈推薦 讓 TypeScript 成為你全端開發的 ACE！

Composition API

Composition API RFC

上面有提到了 Function based API ，而這次的 Composition API 目前來說應該是比較新的進展。同樣身為是 RFCs 來看，很多東西都還沒有一個定案。這個修正草案也是比 Function based API 還要更新的 修正案 ，所以，跟上述所提到的部分，又提出了幾項修正。

• state 更名為 reactive。
• valure 更名為 ref，並提供 isRef, toRefs 方法。
• watch 可收斂為單一函式（原本要有一個回呼函式）。
• computed 可使用 get, set。
• 移除了 onBeforeCreate, onCreated 生命週期的勾子。
• setup 可回傳一個 JSX 的渲染函式結果。

只是這邊不會太詳細的去討論這些東西，因為都還是在草案，而且目前也是不斷修正當中。如果你想要先體驗這些東西，底下就是目前相容於 Vue 2.x 的外掛，前身是 Function based API 的 Repo ，只是被官方重新指向到這裡來了（應該是換名字吧？）。

如果想體驗一下新版本的作法，歡迎各位勇者試試看：

Vue2 plugin for the Composition API

小結

就以目前 Vue 3.x 的走向來看，大抵上就很像是 React Hook 的那種面向，只是因為現在還在草案，等到真的有一個定論的時候，大家再來看看是不是真的那麼方便吧。

不多說，我要先來去練習 TypeScript 了。