Vue3—11—vue源码阅读

---

 

 

一、vue架构简介

我们创造的vnode，本质上是一个js对象，所以操作vnode比操作真实dom的lelement元素，要简单很多很多；

 

通过render函数将template转化为vnode（本质是一个js对象），然后通过渲染器将将vnode转化为真实元素

 

 

 

二、三大系统

第一部分是compiler，即将我们的template组件模板编译成vnode过程；

• 第一compiler-core是公共的核心源码
• 第二compiler-dom是对dom操作的源码
• 第三compiler-sfc是url-loader依赖的代码，即我们在vueCLI中选择runtimeOnly时，是需要webpack下载VueLorder插件来帮助我们解析.vue文件的template组件模板的，不然会报错，而vueloader依赖compiler-sfc；（所欲i如果在index.html使用了tempalter模板那么vueCLI就必须选择complier+runtime模式了，因为vuelorder不会帮助解析html文件，只会解析.vue文件；）
• 第四compiler-ssr是服务端渲染

第二部分是runtime模块，也可以成为renderer模块（渲染器，注意不是render函数），主要是讲我们的vnode变成真实dom；

• 第一是runtime-core
• 第二是runtime-dom
• 第三是runtime-test

第三部分是reactivety模块，也就是响应式模块；当我们数据发生改变时，其实也会创造一个vnode，也会有一个vdom，然后通过一个diff算法，来进行patch；生成最终的vdom；

 

 

 

 

 三、miniVue如何实现？

实现渲染模块、响应式模块、createApp应用程序入口

 

 

 

 

 

 

 

Vue.createApp（App）.mount("#app");的具体实现流程；