开篇

🎯 本书的目的

感谢您开始阅读这本书! 我非常高兴您能对这本书有一点点兴趣。首先总结一下这本书的目的。

☆ 目的

加深对 Vue.js 的理解
Vue.js 是什么？它是如何构建的？
Vue.js 的基本功能实现
自己动手尝试实现 Vue.js 的基本功能
Vue.js/core 的源码阅读能力
能够阅读源码和理解源码与实现效果之间的具体关系，并掌握它们是如何执行和构建的

这里只是提供了几个大致的学习目标，但是并不会要求实现所有的内容，没有必要追求与 Vue.js 一样的完善。您可以完整的阅读所有内容，也可以挑选您感兴趣的部分自由阅读。如果本书能够对您提供任何参考和帮助，我都会感到非常高兴。

🤷‍♂️ 目标受众

接触或者使用过 Vue.js
了解或者会使用 TypeScript

只要满足上面的条件就可以自由阅读了，不再需要其他知识点。本书可能会存在很多大家不是很熟悉的单词，但是我会尝试在本书中尽可能的避免这种情况，或者通过代码和文字来对其进行详细的说明。（但是如果您还不是很了解 Vue.js 或者 TypeScript，我建议您先学习这两部分内容（只需要了解就可以了，不需要十分深入））

🙋‍♀️ 写这本书的意图 (想做的事情)

我在写这本书的时候总结了以下一个需要注意的事情，如果您也能注意到这些并抱着一样的心态来阅读的话就太好了。当然，如果这里有欠缺的地方也希望您能指出来。

排除前置认知
虽然这里与上面提到的“目标受众”的解释有所重叠，但在本书中我还是会尽可能的排除大家对某些内容的原有理解，并通过不时地提供解释或者代码来帮助大家完成对本书的理解。
这也是因为我希望能尽可能为更多的人提供易于理解的内容。
对于有一定知识水平的人来说，可能有很多部分感觉是多余的，还请理解。
增量实现
本书的目的是为了帮助大家能自己实现一个简易的 Vue.js。
也就是说，这本书是以最基础的功能实现来开始，然后尽量减少代码改动、逐步增量的完善后面的内容。
更具体的说法就是“尽可能减少无用（未使用）代码的编写”。
避免编写出在最后完成之前都无法用到的代码，并保证每个阶段的实现内容都是处于可以正常运转的状态。
这是因为我个人认为在特定时刻实现某些特定内容是非常重要的，而在其他时刻编写无用的代码是非常痛苦的事情。
尽管它可能不是很完美，但是这能让我们体会到逐渐创造出一个更加完善的工具或者内容时的乐趣。
就像我们一遍又一遍体验到：“我做到了！我现在已经走到这里了！”
避免对特定框架、库或语言的偏见
虽然今天我们重点讲述的是 Vue.js，但是当今依然有很多非常优秀的框架、库和语言。
实际上，除了 Vue.js 以外，作者也有很多非常喜欢的库。尽管这些库不是我编写的，但是我依然从它们提供的知识和服务中得到了很大的帮助。
本书的目的只是“理解 Vue.js”，并不讨论其他的工具和库，或者讲述它们之间的优劣。

💡 这本在线书籍的大体内容和阅读过程

这本书的内容相当丰富，所以我划分了不同的里程碑来对它们进行了划分。

最小示例部分

以支持最少配置实现的 Vue.js。虽然从使用功能上来说只支持最少得部分，但是依然实现了 Visual 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"
    />
    <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
这里我们将实现一个比较实用的 Virtual DOM 和补丁(patch)渲染功能。
这里没有对 suspense 等功能和优化进行实现，不过，最基础的渲染是没有问题的。
还会实现调度程序。
基础响应式系统
这部分我们实现了最基础的 reactive 这个 API，但这部分还会实现其他的 API。
例如从最基础的 ref、watch、computed 到 effectScope、shallowRef 等。
基础组件系统
这里我们将进行组件系统部分的实现。实际上，这部分是依赖于基础虚拟 DOM 部分的，我们将在这部分实现其他的内容。
例如 props/emit、provide/inject、响应式系统扩展和声明周期函数等。
基础模板编译
除了在基础虚拟 DOM 部分中实现的虚拟 DOM 系统的编译器之外，我们还将实现 v-on、v-bind 和 v-for 等指令。
一般来说，这会涉及到组件的模板选项，但这里不涉及 SFC (单文件组件)。
基础 SFC 编译
在本节中，我们将实现一个比较实用的 SFC 编译器。这里会利用基础模板编译器部分中的实现模板编译器来处理模板，重点将是实现脚本编译器。
具体来说，这里会实现 SFC 中的 script （或者 default exports）解析或者 script setup 的解析。
这时，会感觉 chibivue 与 Vue.js 的用法非常相似。
Web 应用的其他必要内容
到基本 SFC 编译器部分，我们已经实现了 Vue.js 大部分实用的功能。
然而，仅仅是这些内容用来开发一个 Web 应用程序还远远不够。例如，您需要全局状态管理或路由管理等。
在这个部分，我们将实现这样的外部插件，并旨在从能完整“开发一个 Web 应用程序”的角度使其更加实用。
并且，我们还将实现 Vue.js 所做的一些优化。

🧑‍ 对这本书的意见和问题

我将尽力回答有关本书的任何问题或评论。

你可以在 Twitter（DM 或 TL）上联系我，或者通过该公开仓库提交 issue 或者 pr 也没有任何问题。

我相信这本书和我自己的理解都不是完美的，所以如果您能不时指出任何观点，我将不胜感激。当然，如果您有“这个解释很难理解！”之类的疑问，也请您有空时联系我。 👍

Twitter(X): https://twitter.com/ubugeeei

🦀 关于 Discord Server

我为这本书创建了一个 Discord 服务器！ (2024/01/01)

我们会在这里发布公告、回答问题或者分享有关这本在线书籍的相关提示。

也欢迎其他 chibivue 用户，加入到与其他 chibivue 用户的交流中。

会日语的成员很多，所以目前大部分对话都是日语，但也欢迎各位不会日语的人，所以不用担心，加入我们吧！（如果你用你的母语的话完全没有问题。）

我大致做了什么

自我介绍
关于 chibivue 的公告（更新信息等）
Tips 分享
问题回答
需求讨论
闲聊
Ubugeeei 在做关于 chibivue 的工作时的自言自语 (欢迎讨论)

怎么加入我们？

邀请链接 👉 https://discord.gg/aVHvmbmSRy

您还可以使用本书标题右上角的 Discord 按钮加入。

参加资格

任何对 chibivue（或 ubugeeei，或这个社区）感兴趣的人！

(请不要只以宣传的目的参加)

参与后我希望您能做什么

请务必阅读 general/rules。其他并没有什么特别的内容。

开篇 ​

🎯 本书的目的 ​

🤷‍♂️ 目标受众 ​

🙋‍♀️ 写这本书的意图 (想做的事情) ​

💡 这本在线书籍的大体内容和阅读过程 ​

🧑‍ 对这本书的意见和问题 ​

🦀 关于 Discord Server ​

我大致做了什么 ​

怎么加入我们？ ​

参加资格 ​

参与后我希望您能做什么 ​

开篇