chibivue？哪裡小了！？太大了，我處理不了！

它很大...

對於那些這樣想的人，我真誠地道歉。

在拿起這本書之前，您可能想像的是更小的東西。

請允許我稍作辯解，即使是我也沒有打算把它做得這麼大。

當我繼續工作時，我發現它很有趣，並想，"哦，我下一步應該新增這個功能嗎？"就這樣變成了這樣。

明白了。讓我們設定一個時間限制。

導致它變得太大的因素之一是"沒有時間限制"。

所以，在這個附錄中，我將嘗試在"15 分鐘"內實作它。

當然，我也會將解釋限制在一頁內。

此外，不僅是頁面，"實作本身將包含在一個檔案中"也是我將嘗試實作的目標。

但是，即使是一個檔案，在一個檔案中寫 100,000 行也是沒有意義的，所以我將目標是在少於 150 行內實作它。

標題是"Hyper Ultimate Super Extreme Minimal Vue"。

關於名稱

我想很多人認為這個名字相當幼稚。

我也這麼認為。

但是，這個名字有一個合適的理由。

在強調它極其小的同時，我想要一個縮寫，所以就變成了這個詞序。

縮寫是"HUSEM Vue (Balloon Vue)"。

"HU-SEN" [fuːsen] 在日語中意思是"氣球"。

雖然我現在將以一種非常草率的方式實作它，但我將這種草率比作一個"氣球"，即使針碰到它也會爆炸。

你只是要實作一個響應式系統，對吧？

不，不是這樣的。這次，我將嘗試列出將在 15 分鐘內實作的內容。

• create app api
• Virtual DOM
• patch rendering
• Reactivity System
• template compiler
• sfc compiler (vite-plugin)

我將實作這些東西。

換句話說，SFC 將工作。

至於原始碼，我假設以下內容將工作：

<script>
import { reactive } from 'hyper-ultimate-super-extreme-minimal-vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    const increment = () => state.count++
    return { state, increment }
  },
}
</script>

<template>
  <button @click="increment">state: {{ state.count }}</button>
</template>

import { createApp } from 'hyper-ultimate-super-extreme-minimal-vue'

// @ts-ignore
import App from './App.vue'

const app = createApp(App)
app.mount('#app')