Vue3源码阅读梳理

如果想要手写实现源码中的函数,阅读我的上一篇文章 Vue3源码(简单手写实现)

源码三大核心 compiler丨reactivity丨runtime

在阅读源码之前,如果编辑器是vscode,推荐安装二个插件:

推荐结合使用,单个使用也能达到效果,使用方式找度娘.(看自己)

Todo Tree : 主要进行代码注释的高亮,需要在settings.json文件中进行配置.(也有侧边栏)

Bookmarks : 主要功能是定位,可以在侧边栏进行点击跳转.

开始阅读源码

Vue.createApp(App).mount('#app')大致过程

createApp

render

返回app

mount

App组件的挂载和渲染过程

大致分为13步,具体截图如下

1. patch:进行diff算法.

2. 处理组件节点.

2.1 进入processComponent

3. 调用mountComponent挂载组件

4. 初始化component,对组件的数据进行赋值和操作

5. 调用设置和渲染的副作用函数

5.1 副作用函数

6. 调用了副作用函数effect()

7. renderComponentRoot,对template进行渲染

8. 把subTree子树的VNode挂载到container上,调用patch()

9. 处理DOM元素,比如div/button/span(每个子树subtree)

9.1 进入processElement

10. 如果还有子元素,进行patch之后,进行挂载

11.12.13. 处理子节点,进行挂载

通过debugger方式查看源码

先打上debugger,按F12刷新一下,通过右面上边的按钮进行调试.