iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
0
Modern Web

VueJS 從前端到後端系列 第 30

下一個 VueJS 3.0 Day 29

  • 分享至 

  • xImage
  •  

部落格同步刊登 [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 了。


上一篇
Vanilla JS 與 Vue 的生命週期 Day 28
下一篇
在 Vue 之後的事情,還會有什麼? Day 30
系列文
VueJS 從前端到後端31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言