介紹

🎯 本書的目的

感謝您選擇這本書！
如果您對這本書哪怕有一點點興趣，我都感到非常高興．
讓我首先總結一下這本書的目的．

☆ 目的

深入理解 Vue.js
什麼是 Vue.js？它是如何構建的？
能夠實現 Vue.js 的基本功能
實際嘗試實現基本功能．
閱讀 vuejs/core 的源代碼
理解實現與官方代碼之間的關係，掌握它們是如何真正構建的．

我提供了一個大致的目標概述，但沒有必要完成所有目標，也不是要求追求完美．
無論您是從頭到尾閱讀，還是只挑選感興趣的部分，都由您決定．
如果您發現這本書的哪怕一小部分有用，我都會很高興！

🤷‍♂️ 目標讀者

有 Vue.js 使用經驗的人
能夠編寫 TypeScript

僅有這兩個先決條件，不需要其他知識．
雖然您在閱讀本書過程中可能會遇到不熟悉的術語，但我已經盡力排除任何先驗知識，並在過程中進行解釋，旨在使這本書自成體系．
但是，如果您遇到不應該用於 Vue.js 或 TypeScript 的術語，我建議您先從相應的資源中學習．
（基本功能就足夠了！（不需要深入研究））

🙋‍♀️ 本書（和作者）所關注的（並希望實現的）

在深入之前，我想分享一些我在寫這本書時特別關注的事情．
我希望您在閱讀時記住這些，如果有任何我沒有達到目標的地方，請告訴我．

消除對先驗知識的需求
雖然這可能與前面提到的「目標讀者」部分重疊，但我努力使這本書盡可能自成體系，
最大限度地減少對先驗知識的需求，並根據需要提供解釋．
這是因為我想讓盡可能多的讀者理解盡可能清晰的解釋．
有豐富經驗的人可能會發現一些解釋有點冗長，但我請求您的理解．
增量實現
本書的目標之一是手工增量實現 Vue.js．這意味著本書專注於實踐方法，
在實現方面，我強調以小的增量步驟構建．
更具體地說，就是「最小化非工作狀態」．
而不是擁有直到完成才能工作的東西，目標是在每個階段都保持其功能．
這反映了我個人的編碼方法——持續編寫非功能代碼可能令人沮喪．
即使不完美，總是有東西在運行會使過程更愉快．
這是關於體驗小勝利，比如「是的！現在它工作到這一點了！」
避免對特定框架，庫或語言的偏見
雖然這本書專注於 Vue.js，但今天有無數優秀的框架，庫和語言．
事實上，除了 Vue.js 之外，我還有我的最愛，我經常從用它們構建的見解和服務中受益．
這本書的目的純粹是「理解 Vue.js」，不涉及對其他工具的排名或判斷．

💡 本線上書籍的主題和結構

由於這本書變得相當龐大，我設置了成就里程碑並將其分為不同的部分．

最小示例部分
在這裡，Vue.js 以最基本的形式實現．
雖然這一部分涵蓋了最小的功能集，但它將處理
虛擬 DOM，響應式系統，編譯器和 SFC（單文件組件）支持．
然而，這些實現遠非實用，並且高度簡化．
但是，對於那些想要 Vue.js 廣泛概述的人來說，這一部分提供了足夠的見解．
作為介紹性部分，這裡的解釋比其他部分更詳細．
在本部分結束時，讀者應該對閱讀官方 Vue.js 源代碼感到有些舒適．在功能上，您可以期望代碼大致執行以下操作...

vue

<script>
import { reactive } from 'chibivue'

export default {
  setup() {
    const state = reactive({ message: 'Hello, chibivue!', input: '' })

    const changeMessage = () => {
      state.message += '!'
    }

    const handleInput = e => {
      state.input = e.target?.value ?? ''
    }

    return { state, changeMessage, handleInput }
  },
}
</script>

<template>
  <div class="container" style="text-align: center">
    <h2>{{ state.message }}</h2>
    <img
      width="150px"
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
      alt="Vue.js Logo"
    />
    <p><b>chibivue</b> is the minimal Vue.js</p>

    <button @click="changeMessage">click me!</button>

    <br />

    <label>
      Input Data
      <input @input="handleInput" />
    </label>

    <p>input value: {{ state.input }}</p>
  </div>
</template>

<style>
.container {
  height: 100vh;
  padding: 16px;
  background-color: #becdbe;
  color: #2c3e50;
}
</style>

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

const app = createApp(App)

app.mount('#app')

基礎虛擬 DOM 部分 在這一部分中，我們將為虛擬 DOM 實現相當實用的補丁渲染功能．雖然我們不會實現像 Suspense 或其他優化等功能，但它將足夠熟練地處理基本渲染任務．我們還將在這裡實現調度器．
基礎響應式系統部分 雖然我們在最小示例部分實現了 reactive API，但在這一部分中我們將實現其他 API．從 ref，watch 和 computed 等基本 API 開始，我們還將深入研究 effectScope 和 shallow 系列等更高級的 API．
基礎組件系統部分 在這裡，我們將承擔與組件系統相關的基本實現．事實上，由於我們已經在基礎虛擬 DOM 部分為組件系統設置了基礎，這裡我們將專注於組件系統的其他方面．這包括 props/emit，provide/inject，響應式系統的擴展和生命週期鉤子等功能．
基礎模板編譯器部分 除了在基礎虛擬 DOM 部分實現的虛擬 DOM 系統編譯器之外，我們將實現 v-on，v-bind 和 v-for 等指令．通常，這將涉及組件的 template 選項，我們不會在這裡涵蓋 SFC（單文件組件）．
基礎 SFC 編譯器部分 在這裡，我們將在利用基礎模板編譯器部分實現的模板編譯器的同時，實現一個有些實用的 SFC 編譯器．具體來說，我們將實現 script setup 和編譯器宏．在這一點上，體驗將非常接近使用常規 Vue．
Web 應用程式要點部分 當我們完成基礎 SFC 編譯器部分時，我們將擁有一套有些實用的 Vue.js 功能．然而，要開發 Web 應用程式，仍然缺少很多東西．例如，我們需要管理全局狀態和路由器的工具．在這一部分中，我們將開發這樣的外部插件，旨在從「Web 應用程式開發」的角度使我們的工具包更加實用．

🧑‍🏫 關於本書的意見和問題

我打算盡我所能回應關於這本書的問題和反饋．請隨時在 Twitter 上聯繫我（通過 DM 或直接在時間線上）．由於我已經公開了存儲庫，您也可以在那裡發布問題．我知道我自己的理解並不完美，所以我感謝任何反饋．如果您發現任何解釋不清楚或具有挑戰性，請不要猶豫詢問．我的目標是向盡可能多的人傳播清晰正確的解釋，我希望我們能夠一起構建這個 👍．

https://twitter.com/ubugeeei

🦀 關於 Discord 伺服器

我們為這本書創建了一個 Discord 伺服器！（2024/01/01） ~~在這裡，我們分享公告，為與這本線上書籍相關的問題和技巧提供支持．~~
我們也歡迎隨意對話，所以讓我們與其他 chibivue 用戶愉快地交流．目前，由於有很多日語使用者，大部分對話都是日語，但非日語使用者也歡迎毫不猶豫地加入！（完全可以使用您的母語）

最近，我們不僅積極為 chibivue 做貢獻，還作為 Vue.js 日本社群伺服器的一部分！

我們大致做什麼

自我介紹（可選）
與 chibivue 相關的公告（如更新）
分享技巧
回答問題
響應請求
隨意對話

如何加入

這是邀請連結 👉 https://discord.gg/aVHvmbmSRy

您也可以從這本書標題右上角的 Discord 按鈕加入．

關於作者

ubugeeei

Vue.js 成員，Vue.js Japan User Group 核心工作人員．
chibivue land 所有者．

https://ublog.dev/

贊助商

如果您想支持我的工作，我將非常感激！

https://github.com/sponsors/ubugeeei

介紹 ​

🎯 本書的目的 ​

🤷‍♂️ 目標讀者 ​

🙋‍♀️ 本書（和作者）所關注的（並希望實現的） ​

💡 本線上書籍的主題和結構 ​

🧑‍🏫 關於本書的意見和問題 ​

🦀 關於 Discord 伺服器 ​

我們大致做什麼 ​

如何加入 ​

關於作者 ​

贊助商 ​

介紹