chibivue? Где тут chibi!? Он слишком большой, я не могу с этим справиться!

Он большой...

Тем, кто так подумал, я искренне приношу свои извинения.

Перед тем, как взять эту книгу, вы, возможно, представляли себе что-то меньшее.

Позвольте мне немного оправдаться, даже я не планировал делать его таким большим.

По мере того, как я продолжал работать над ним, я находил это занятным и думал: "О, может быть, стоит добавить эту функциональность следующей?" И вот так всё и получилось.

Понятно. Давайте установим ограничение по времени.

Одним из факторов, из-за которых он стал слишком большим, было то, что "не было ограничения по времени".

Поэтому в этом приложении я попытаюсь реализовать его за "15 минут".

Конечно, я также ограничу объяснение всего одной страницей.

Более того, не только страница, но и "сама реализация будет содержаться в одном файле" - это цель, которой я попытаюсь достичь.

Однако, даже если это один файл, бессмысленно писать 100 000 строк в одном файле, поэтому я буду стремиться реализовать его менее чем в 150 строках.

Название - "Hyper Ultimate Super Extreme Minimal Vue".

О названии

Я думаю, многие люди подумали, что название довольно детское.

Я тоже так думаю.

Однако для этого названия есть веская причина.

Подчеркивая, что он чрезвычайно маленький, я хотел сделать аббревиатуру, поэтому получился такой порядок слов.

Аббревиатура - "HUSEM Vue (Воздушный шарик Vue)".

"HU-SEN" [fuːsen] означает "воздушный шарик" на японском.

Хотя я буду реализовывать это очень небрежно, я сравниваю эту небрежность с "воздушным шариком", который лопнет, если даже иголка коснется его.

Ты же просто собираешься реализовать систему реактивности, верно?

Нет, это не так. На этот раз я попытаюсь перечислить, что будет реализовано за 15 минут.

• create app api
• Virtual DOM
• patch рендеринг
• Система реактивности
• компилятор шаблонов
• sfc компилятор (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')