第一次渲染和 createApp API

從哪裡開始？

開始實作吧！

終於要進入 Vue.js 內部開始實作了，這是令人期待的時刻！其實，「從哪裡開始」是一個很重要的問題。

現在，讓我們開始逐步實作 chibivue。我們應該如何進行實作？

這是作者在建立新東西時總是牢記的一點：首先，思考軟體將如何被使用。
為了方便起見，讓我們稱之為「開發者介面」。

這裡，「開發者」指的是使用 chibivue 開發 Web 應用程式的人，而不是 chibivue 本身的開發者。
換句話說，在開發 chibivue 時，讓我們參考原始 Vue.js 的開發者介面作為參考。
具體來說，讓我們看看在使用 Vue.js 開發 Web 應用程式時要寫什麼。

開發者介面層級？

我們在這裡需要注意的是，Vue.js 有多個開發者介面，每個介面都有不同的層級。這裡，層級指的是它與原始 JavaScript 的接近程度。
例如，以下是使用 Vue 顯示 HTML 的開發者介面示例：

在單檔案元件中編寫模板

vue

<!-- App.vue -->
<template>
  <div>Hello world.</div>
</template>

import { createApp } from 'vue'
import App from './App.vue'

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

使用 template 選項

import { createApp } from 'vue'

const app = createApp({
  template: '<div>Hello world.</div>',
})

app.mount('#app')

使用 render 選項和 h 函式

import { createApp, h } from 'vue'

const app = createApp({
  render() {
    return h('div', {}, ['Hello world.'])
  },
})

app.mount('#app')

還有其他選項，但讓我們考慮這三個開發者介面。
哪一個最接近原始 JavaScript？答案是「使用 render 選項和 h 函式」（選項 3）。
選項 1 需要實作 SFC 編譯器和打包器（或載入器），選項 2 需要編譯傳遞給模板的 HTML（將其轉換為 JavaScript 程式碼）才能工作。

為了方便起見，讓我們稱更接近原始 JS 的開發者介面為「低階開發者介面」。
這裡重要的是「從低階部分開始實作」。
原因是在許多情況下，高階描述被轉換為低階描述並執行。
換句話說，選項 1 和 2 最終都在內部轉換為選項 3 的形式。
這種轉換的實作稱為「編譯器」。

從低階開始！

「低階」聽起來或許不夠厲害，但事實正好相反！它是整體的基礎；基礎不穩固，就無法建立更高階的功能。

所以，讓我們從實作像選項 3 這樣的開發者介面開始！

createApp API 和渲染

雖然我們的目標是選項 3 的形式，但我們仍然不太了解 h 函式，而且由於這本書的目標是增量開發，讓我們不要立即瞄準選項 3 的形式。
相反，讓我們從實作一個回傳要顯示的訊息的簡單渲染函式開始。

圖像 ↓

import { createApp } from 'vue'

const app = createApp({
  render() {
    return 'Hello world.'
  },
})

app.mount('#app')

立即實作

讓我們在 ~/packages/index.ts 中建立 createApp 函式。
注意：由於不需要輸出「Hello, World」，我們將刪除它。

export type Options = {
  render: () => string
}

export type App = {
  mount: (selector: string) => void
}

export const createApp = (options: Options): App => {
  return {
    mount: selector => {
      const root = document.querySelector(selector)
      if (root) {
        root.innerHTML = options.render()
      }
    },
  }
}

這非常簡單。讓我們在遊樂場中試試。

~/examples/playground/src/main.ts

import { createApp } from 'chibivue'

const app = createApp({
  render() {
    return 'Hello world.'
  },
})

app.mount('#app')

我們能夠在螢幕上顯示訊息！做得好！

createApp example rendered in the browser

完成第一步！

只用幾十行程式碼，一個 Vue.js 風格的應用程式就執行起來了！這一小步，是理解框架的一大步。

到此為止的原始碼： chibivue (GitHub)

第一次渲染和 createApp API ​

從哪裡開始？ ​

開發者介面層級？ ​

createApp API 和渲染 ​

立即實作 ​

第一次渲染和 createApp API

從哪裡開始？

開發者介面層級？

createApp API 和渲染

立即實作