Vue 3 初體驗 | 點燈坊

Vue 3 招牌是其新的 Composition API，這徹底解決了 Vue 2 的 this 老問題，使得 Extract Function 與 Point-free 變得很容易，也更容易與其他 FP Library 整合。

Version

Vue 3.0.11

Vue 3

歷史性的一刻，在 Sep.18, 2020 正式發行 3.0.0 版。

Compositon API

以經典的 counter 來看看 Vue 3 所帶來的改變。

<template lang='pug'>
button(@click='onClick') +
span {{ count }}
</template>

<script setup>
ref: count = 0
let onClick = () => count++
</script>

第 1 行

<template lang='pug'>
button(@click='onClick') +
span {{ count }}
</template>

HTML template 不再限定要在單一 root element 底下，這是很親民的改變。

第 6 行

<script setup>

在 <script> 內加上 setup，表示自動產生 setup() boilerplate。

第 7 行

ref: count = 0

使用 ref sugar 定義 count state 的初始值 0。

第 8 行

let onClick = () => count++

定義 onClick() 對 count state 遞增，由於不再使用 this 讀取 state，可放心使用 arrow function，但 state 必須由 .value 讀取。

以上為 Vue 3 Composition API 標準寫法，既然 Vue 3 有其 Functional 特性，可進一步 Point-free

Point-free

結果不變，但使用 Point-free 改寫。

<template lang='pug'>
button(@click='onClick') +
span {{ count }}
</template>

<script setup>
import { ref } from 'vue'
import { read, write } from 'vue3-fp'
import { pipe, inc } from 'ramda'

let count = ref (0)

let onClick = pipe (
  read (count),
  inc,
  write (count)
)
</script>

13 行

let onClick = pipe (
  read (count),
  inc,
  write (count)
)

onClick() 本質是 function，由於不再使用 this 讀取 state，理論上可使用 Ramda 的 pipe() 以 pure function 組合出 onClick()：

• read (count)：讀取 count state
• inc：對值遞增
• write (count)：寫入 count state

這種風格與 Promise Chain 很像，每個 then() 都是傳入 function，且不斷將值傳到下一個 function

Conclusion

• 由經典的 counter 可發現 Vue 3 的最大改變在於 this 不見了，且 data 的初始值也由 ref() 建立，method 不再需要靠 this 存取 state，有助於 Extract Function、Function Pipeline 與 Point-free
• 由於 onClick method 本質是 function，在沒有 this 牽絆下，可由 Function Pipeline 以 pure function 組合出 method，這也是為什麼 Vue 3 稱其為 Composition API，因為非常適合以 Higher Order Function 組合