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");的具体实现流程;