lion恶魔巫师

最近在做 monorepo 项目的前端工程化，其中有一个部分与 git commit 有关，因此参考了几个项目，总结出了相关的工具链，并写成文章。

在之前的文章，我们已经介绍过 vue3 的响应式原理。而这篇则是在响应式原理的基础上，进一步介绍 Vue3 的另外一个 API —— watch

本文讲的会讲述热更新的每个流程，主要的作用是什么，还有这些流程是怎么串起来的，目的是帮助大家对热更新的流程有个基本的了解。

准备 拉取源码，安装依赖，并进行一次构建 调试内置项目 vite 的内置项目，在 playground 文件夹内，里面有非常多项目，我们挑选其中的 vue 项目进行测试 watch 模式打包 vite

我们知道，Vite 开发时，用的是 esbuild 进行构建，而在生产环境，则是使用 Rollup 进行打包。 Vite 官方文档已经做出解析：尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导

本文会用一个极其简单的例子，来说明如何处理一个 Vue 文件，并将其展示到页面中。在这个过程中，介绍 Vue 提供的编译能力，以及如何组合利用这些能力。

之前写过几篇 Vite 的文章，对 Vite 的概念也有一定的理解了，但理解归理解，仍然觉得很虚，也不知怎么的，这几个概念突然就变成一个这么强大的工具。。。 于是，我决定自己手写一遍 Vite。

之前手写了一个 Vite Server，实现了一些基本的功能，但是这些能力都是写死的，没有任何的可扩展性，这次我们将它改造成插件化架构，通过新增插件来新增能力。

以前一直以为，VNode 也能像 DOM 那样，根据 children 属性，将 VNode 连接组成一棵树。但最近我发现这是不对的，VNode 不能单独组成一棵完整的页面树。