Petite-vue 初體驗

Petite-vue 為 Vue 的子集，只收錄 Vue 最常用功能，大約只有 6KB 左右。支援 Options API、Composition API 與 JavaScript-free 三種 Coding Style，特別適合配合後端 framework 或 SSG 使用，且不需任何打包工具。

Version

Petite-vue 0.41
Hugo 0.121.1

Options API

index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <div>
      <button @click="onClick">+</button>
      <div>[[ count ]]</div>
    </div>
  </body>
</html>

<script type="module">
import { createApp } from './petite-vue.es.js'

createApp({
  $delimiters: ['[[', ']]'],
  count: 0,
  onClick() {
    this.count++
  },
}).mount()
</script>

Line 15

<script type="module">
import { createApp } from './petite-vue.es.js'

createApp({
  $delimiters: ['[[', ']]'],
  count: 0,
  onClick() {
    this.count++
  },
}).mount()
</script>

Petite-vue 支援 Vue 最經典的 Options API 風格
State、method 都寫在 createApp() 下
$delimiters：為了避開 Go template 的 delimiter

Composition API

index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <div>
      <button @click="onClick">+</button>
      <div>[[ states.count ]]</div>
    </div>
  </body>
</html>

<script type="module">
import { createApp, reactive } from './petite-vue.es.js'

let states = reactive({
    count: 0
  }
)

let onClick = () => states.count++

createApp({
  $delimiters: ['[[', ']]'],
  states,
  onClick
}).mount()
</script>

Line 15

<script type="module">
import { createApp, reactive } from './petite-vue.es.js'

let states = reactive({
    count: 0
  }
)

let onClick = () => states.count++

createApp({
  $delimiters: ['[[', ']]'],
  states,
  onClick
}).mount()
</script>

Petite-vue 也支援 Composition API 風格
一樣使用 createApp() 統整
State 改使用 reactive() 管理
每個 method 都是獨立 function，不再使用 this 存取 state

JavaScript-free

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <div v-scope="{ count: 0 }">
      <button @click="count++">+</button>
      <div>[[ count ]]</div>
    </div>
  </body>
</html>

<script type="module">
import { createApp } from './petite-vue.es.js'

createApp({
  $delimiters: ['[[', ']]']
}).mount()
</script>

Line 8

<div v-scope="{ count: 0 }">
  <button @click="count++">+</button>
  <div>[[ count ]]</div>
</div>

Petite-vue 也支援類似 Alpine 一樣，將代碼全部寫在 HTML 內
在 v-scope 內直接宣告 state
將 method 直接寫在 HTML 內

Conclusion

Petite-vue 只能使用 reactive()，不能使用 ref()，因此不用在猶豫該使用 reactive() 或 ref()
JavaScript-free 適合簡單範例，Options API 則適用於一般規模，若要將重複代碼抽出來則只能使用 Composition API

Reference

Vue, Petite-vue