前言

我们刚分析完不同的dist文件的作用。

坏蛋Dan：vue runtime源码分析学习——day2：runtime-only和runtime-compiler的区别

现在我们来确定后续的分析流程。

现在由于现在我们测试的是runtime的代码，所以要么用dist的文件到浏览器调试，要么基于单元测试，模拟runtime的场景。

这里我们还是模拟runtime的场景，在浏览器上用dist的包调试可以说是本末倒置了，因为最开始我就是不喜欢调试dist之后的文件才研究直接调试typescript代码的方法。另一方面，vscode和浏览器来回切换是一件很累的事情，即使有一键切屏（在家莫得双屏）。

话不多说，我们来确定下后续要怎么分析。

测试用例

测试用例的话就直接用官方包里自带的吧，如果到时候有些不适合我们再补充。

预期分析流程

学习嘛，就是要都过一遍，所以接下来分析是会带上编译相关的代码，而不是单纯的runtime。当然，如果是compiler-dom和compiler-core里的方法就直接绕过。

我们的入口index.ts已经分析过了（虽然基本也没啥分析）。所以这里入口自然就是@vue/runtime-dom[1]的createApp这个方法。

那么顺着这个入口，我们一步一步分析，这个过程涉及到下面几个包：

• vue，也就是主包
• runtime-dom
• runtime-core
• reactivity

PS：ssr相关的也会绕过。

可能还会涉及到其它的包，这个后面遇到了再说。

之前想过这几个包分开来独立分析，但是这样分析的时候可能会缺少包之间的联系，会有些没有没脑的。

不过有个点需要提前说明，这里runtime里的方法不仅仅是提供给template的，更多的是我们开发者常用的api，这些是作用于script代码的。

所以后面分析的时候会用辅助函数和api区分这两者。

补充：

1. 分两部分分析，一部分是流程相关的，比如patch等；另一部分则是我们开发者调用的api以及render function中涉及到的runtime api。

参考

1. ^@vue/runtime-dom https://github.com/vuejs/core/tree/main/packages/runtime-dom

编辑于 2023-02-17 15:35・IP 属地广东