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

 

posted @ 2021-09-23 16:48  Eric-Shen  阅读(246)  评论(0编辑  收藏  举报