皮皮网

1.vue反编译dist包到源码
2.vue3源码学习--调试环境搭建
3.vue3中的编译器原理和优化策略
4.Vue2源码细读-new Vue()初始化
5.10本前端框架 VUE 学习书籍推荐
6.慕课网上没搜到vue源码，有没有课程透彻分析Vue 源码的？

vue反编译dist包到源码

       在处理老项目源码缺失问题时，可以通过反编译dist包获取部分源码。以下是具体步骤：

       当面临源码缺失的挑战时，可以通过反编译dist包来补全代码。首先，地图编写源码需要在管理员权限下启动命令行工具（cmd）。

       在dist包的static/js目录下，找到如0.7ab7dffccc1ca.js.map这样的编译映射文件。以这个文件为例，执行反编译操作，可以全局安装reverse-sourcemap插件，然后执行命令：reverse-sourcemap --output-dir source 0.7ab7dffccc1ca.js.map

       为了自动化这个过程，可以编写脚本利用Node.js的child_process模块。通过fs模块遍历文件夹，找出所有.map文件，将其存入数组，源码编程新版下载然后使用递归调用reverse-sourcemap命令。以下是关键步骤的脚本编写方法：

       创建一个函数，用于执行反编译命令（reverse-sourcemap）。

       使用fs模块读取文件并使用正则表达式匹配.map文件。

       遍历匹配到的.map文件，并调用执行函数。

       通过这些步骤，你将能够从dist包反编译出部分源码，尽管可能只限于Vue文件，但这已能满足基本需求。最终，你会看到source目录下反编译得到的源码文件。

vue3源码学习--调试环境搭建

       Vue3源码调试环境搭建指南

       要深入学习Vue3源码，首先需要在本地搭建一个调试环境。以下是详细的步骤：

       1. 克隆项目: 从GitHub上获取官方或你感兴趣的Vue3项目，通常可通过以下命令进行克隆：

       <pre>git clone /vuejs/vue3</pre>

       2. 安装依赖: 项目克隆后，精准擒牛源码执行安装命令以确保所有必要的构建工具和依赖已准备就绪：

       <pre>cd vue3-project

       npm install

       yarn install (如果项目使用yarn)</pre>

       3. 运行项目: 安装完成后，运行项目以验证是否可以正常启动：

       <pre>npm run serve 或 yarn serve</pre>

       4. 调试模式: 要进行源码级别的调试，你需要配置开发环境，开启调试工具如Chrome DevTools或Vue Devtools：

       <pre>在浏览器中访问piler)的vue包的时候，vue编译的时刻是发生在挂载($mount)的时候。

4.运行时不编译

       å¦‚果使用未携带编译器的vue包的时候，vue在运行时是不会进行编译的。那么它的编译又发生在什么时候呢？使用未携带编译器的vue包的时候，需要进行预编译，也就是基于构建工具使用，就是我们平时使用的vue-cli进行构建的项目，就是使用webpack调用vue-loader进行预编译，将所有vue文件，就是SFC，将里面的template模版部分转换成render函数。这样做的好处就是vue的包体积变小了，执行的时候速度更快了，因为不需要进行编译了。

vue编译器原理

       ç®€å•æ¥è¯´å°±æ˜¯ï¼šå…ˆå°†template模版转换成ast抽象语法树，ast再转换成渲染函数render。

       é‚£ä¹ˆä»€ä¹ˆæ˜¯æ˜¯ast抽象语法树呢？

1.ast抽象语法树

       åœ¨template模版和render函数之间有一个中间产物叫做ast抽象语法树。它就是个js对象，它能够描述当前模版的结构信息，跟vnode很类似。注意，ast只是程序运行过程中编译产生的，它跟我们最终程序的运行是没有任何关系的。也就是当这个渲染函数生成之后，ast的生命周期就结束了，不再需要了，而那个虚拟DOM则伴随整个程序的生命周期。这个就是ast和虚拟DOM的本质区别。

2.为什么需要ast呢

       åœ¨ast转换成render函数的过程中，需要进行特别的操作。第一次，将template转成的ast是个非常粗糙的js对象，是一次非常粗糙的转换，类似正则表达式的匹配，然后我们的template模版中还有很多表达式，指令，事件需要重新解析，经过这些具体的深加工的解析(transform)之后会得到一个终极ast，然后这个对这个终极ast进行generate，生成render函数

template=>ast=>transform=>ast=>render3.mini版vue编译器

       ä¸‹é¢æˆ‘们来看一个mini版的vue编译器，具体代码已省略，具体代码我已经放在Github上了：mini-vue-compiler

functiontokenizer(input){ ...}functionparse(template){ consttokens=tokenizer(template)...}functiontransform(ast){ ...}functiontraverse(ast,context){ ...}functiongenerate(ast){ ...}functioncompile(template){ //1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){ //returnh("h3",{ },//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{ { title}}</h3>`compile(tmpl)

       å¤§æ¦‚有以上操作，其中parse函数就是发生在把template转换成ast的这过程，具体是通过一些正则表达式的匹配template中的字符串。比如将

xxx

       è½¬æˆast对象，那么就是通过正则表达式匹配如果是

那么就设置一个开始标记，再往后面匹配到xxx内容，然后就设置一个子元素，最后匹配到

       é‚£ä¹ˆå°±è®¾ç½®ä¸€ä¸ªç»“束标记，以此类推。parse解析之后得到的是一个粗糙的ast对象。经过parse解析得到一个粗糙的ast对象之后，就用transform进行深加工，最后要经过generate生成代码。

Vue3编译过程剖析

       æŒ‚载的时候先把template编译成render函数，在创建实例之后，直接调用组件实例的render函数创建这个组件的真实DOM，然后继续向下做递归。

1.vue2.x和vue3.x的编译对比

       Vue2.x中的Compile过程会是这样：

       parse词法分析，编译模板生成原始粗糙的AST。

       optimize优化原始AST，标记ASTElement为静态根节点或静态节点。

       generate根据优化后的AST，生成可执行代码，例如_c、_l之类的。

       åœ¨Vue3中，整体的Compile过程仍然是三个阶段，但是不同于Vue2.x的是，第二个阶段换成了正常编译器都会存在的阶段transform。

       parse词法分析，编译模板生成原始粗糙的AST。

       transform遍历AST,对每一个ASTelement进行转化，例如文本元素、指令元素、动态元素等等的转化

       generate根据优化后的AST，生成可执行代码函数。

2.源码编译入口

       æˆ‘们先从一个入口来开始我们的源码阅读，packages/vue/index.ts。

//web平台特有编译函数functioncompileToFunction(template:string|HTMLElement,options?:CompilerOptions):RenderFunction{ //省略...if(template[0]==='#'){ //获取模版内容constel=document.querySelector(template)//省略...template=el?el.innerHTML:''}//编译const{ code}=compile(template,extend({ //省略...},options))constrender=(__GLOBAL__?newFunction(code)():newFunction('Vue',code)(runtimeDom))asRenderFunction//省略...return(compileCache[key]=render)}//注册编译函数registerRuntimeCompiler(compileToFunction)export{ compileToFunctionascompile}

       è¿™ä¸ªå…¥å£æ–‡ä»¶çš„代码比较简单，只有一个compileToFunction函数，但函数体内的内容却又比较关键，主要是经历以下步骤：

       ä¾èµ–注入编译函数至runtimeregisterRuntimeCompiler(compileToFunction)

       runtime调用编译函数compileToFunction

       è°ƒç”¨compile函数

       è¿”回包含code的编译结果

       å°†code作为参数传入Function的构造函数将生成的函数赋值给render变量

       å°†render函数作为编译结果返回

3.template获取

       app.mount()获取了templatepackages/runtime-dom/src/index.ts

4.编译template

       compile将传?template编译为render函数，packages/runtime-core/src/component.ts

       å®žé™…执?的是baseCompile，packages/compiler-core/src/compile.ts

       ç¬¬?步解析-parse：解析字符串template为抽象语法树ast

       ç¬¬?步转换-transform：解析属性、样式、指令等

       ç¬¬ä¸‰æ­¥?成-generate：将ast转换为渲染函数

Vue3编译器优化策略

       è¿™æ˜¯ä¸€ä¸ªéžå¸¸å…¸åž‹çš„用内存换时间的操作

1.静态节点提升<div><div>{ { msg}}</div><p>coboy</p><p>coboy</p><p>coboy</p></div>

       ä»¥ä¸Šè¿™ä¸ªæ®µtemplate如果没有开启静态节点提升它编译后是这样的：

import{ toDisplayStringas_toDisplayString,createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){ return(_openBlock(),_createBlock("div",null,[_createVNode("div",null,_toDisplayString(_ctx.msg),1/*TEXT*/),_createVNode("p",null,"coboy"),_createVNode("p",null,"coboy"),_createVNode("p",null,"coboy")]))}

       å¦‚果开启了静态节点提升之后它编译后则是这样的：

import{ toDisplayStringas_toDisplayString,createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"const_hoisted_1=/*#__PURE__*/_createVNode("p",null,"coboy",-1/*HOISTED*/)const_hoisted_2=/*#__PURE__*/_createVNode("p",null,"coboy",-1/*HOISTED*/)const_hoisted_3=/*#__PURE__*/_createVNode("p",null,"coboy",-1/*HOISTED*/)exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){ return(_openBlock(),_createBlock("div",null,[_createVNode("div",null,_toDisplayString(_ctx.msg),1/*TEXT*/),_hoisted_1,_hoisted_2,_hoisted_3]))}

       æˆ‘们可以看到template里存在大量的不会变的p标签，所以当这个组件重新渲染的时候，这些静态的不会变的标签就不应该再次创建了。所以vue3就把这些静态的不会变的标签的VNode放在了render函数作用域的外面，在下次render函数再次执行的时候，那些静态标签的VNode已经在内存里了，不需要重新创建了。相当于占用当前机器的内存，避免重复创建VNode，用内存来换时间。大家仔细斟酌一番静态提升的字眼，静态二字我们可以不看，但是提升二字，直抒本意地表达出它（静态节点）被提高了。

2.补丁标记和动态属性记录<div><div:title="title">coboy</div></div>

       æ„æ€å°±æ˜¯åœ¨ç¼–译的过程中，像人眼一样对模版进行扫描看哪些东西是动态的，然后提前把这些动态的东西提前保存起来，作个标记和记录，等下次更新的时候，只更新这些保存起来的动态的记录。比如上面模版的title是动态的，提前做个标记和记录，更新的时候就只更新title部分的内容。

import{ createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){ return(_openBlock(),_createBlock("div",null,[_createVNode("div",{ title:_ctx.title},"coboy",8/*PROPS*/,["title"])]))}<div><div:title="title">{ { text}}</div></div>import{ toDisplayStringas_toDisplayString,createVNodeas_createVNode,openBlockas_openBlock,createBlockas_createBlock}from"vue"exportfunctionrender(_ctx,_cache,$props,$setup,$data,$options){ return(_openBlock(),_createBlock("div",null,[_createVNode("div",{ title:_ctx.title},_toDisplayString(_ctx.text),9/*TEXT,PROPS*/,["title"])]))}

       æˆ‘们可以观察到在_createVNode函数的第四个参数是个9，后面是一个注释：/TEXT,PROPS/，这个是表示在当前的节点里面有两个东西是动态的，一个是内部的文本，一个是属性，然后具体是哪个属性，在第五个参数的数组里面则记录了下来["title"]，有个title的属性是动态的。

       åœ¨å°†æ¥è¿›è¡Œpatch更新的时候，就可以根据当前记录的信息，进行更新，缩减更新过程和操作，可以非常精确地只进行title和文本的更新。

       å¦‚æžœdiv标签里是静态文本的话，_createVNode函数的第四个参数则变成了8，后面的注释变成了：/PROPS/，后面的第五个参数数据不变。

       _createVNode函数的第四个参数的数字其实是一个二进制数字转成十进制的数字。

       8的二进制是，9的二进制是，很容易可以看出二进制的每一位的数字都代表着特殊的含义。这些数字就是patchFlag，那么什么是patchFlag呢？

什么是patchFlag

       patchFlag是complier时的transform阶段解析ASTElement打上的补丁标记。它会为runtime时的patchVNode提供依据，从而实现靶向更新VNode和静态提升的效果。

       patchFlag被定义为一个数字枚举类型，它的每一个枚举值对应的标识意义是：

       TEXT=1动态文本的元素

       CLASS=2动态绑定class的元素

       STYLE=4动态绑定style的元素

       PROPS=8动态props的元素，且不含有class、style绑定

       FULL_PROPS=动态props和带有key值绑定的元素

       HYDRATE_EVENTS=事件监听的元素

       STABLE_FRAGMENT=子元素的订阅不会改变的Fragment元素

       KEYED_FRAGMENT=自己或子元素带有key值绑定的Fragment元素

       UNKEYED_FRAGMENT=没有key值绑定的Fragment元素

       NEED_PATCH=带有ref、指令的元素

       DYNAMIC_SLOTS=动态slot的组件元素

       HOISTED=-1静态的元素

       BAIL=-2不是render函数生成的一些元素，例如renderSlot

       æ•´ä½“上patchFlag的分为两大类：

       å½“patchFlag的值大于0时，代表所对应的元素在patchVNode时或render时是可以被优化生成或更新的

       å½“patchFlag的值小于0时，代表所对应的元素在patchVNode时，是需要被fulldiff，即进行递归遍历VNodetree的比较更新过程。

       ä»¥ä¸Šå°±æ˜¯vue3的一个非常高效的优化策略叫补丁标记和动态属性记录。

3.缓存事件处理程序functiontokenizer(input){ ...}functionparse(template){ consttokens=tokenizer(template)...}functiontransform(ast){ ...}functiontraverse(ast,context){ ...}functiongenerate(ast){ ...}functioncompile(template){ //1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){ //returnh("h3",{ },//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{ { title}}</h3>`compile(tmpl)0

       å°†æ¥æ¡†æž¶ä¼šåƒreact那样把@click="onClick"变成@click="()=>onClick()"，最后可能是这样的一个箭头函数。那就意味着每次onClick的函数都是一个全新的函数，那就会造成这个回调函数明明没有变，都会被认为变了，那就必须进行一系列的更新，那么如果能把这个回调函数缓存起来，更新的时候，就不要再创建了。

       æœªè¿›è¡Œç¼“存事件处理程序之前的编译

functiontokenizer(input){ ...}functionparse(template){ consttokens=tokenizer(template)...}functiontransform(ast){ ...}functiontraverse(ast,context){ ...}functiongenerate(ast){ ...}functioncompile(template){ //1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){ //returnh("h3",{ },//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{ { title}}</h3>`compile(tmpl)1

       è¿›è¡Œç¼“存事件处理程序之后的编译

functiontokenizer(input){ ...}functionparse(template){ consttokens=tokenizer(template)...}functiontransform(ast){ ...}functiontraverse(ast,context){ ...}functiongenerate(ast){ ...}functioncompile(template){ //1.解析constast=parse(template)console.log(JSON.stringify(ast,null,2))//2.转换transform(ast)//3.生成constcode=generate(ast)console.log(code)//returnfunctionrender(ctx){ //returnh("h3",{ },//ctx.title//)}returnnewFunction(code)()}lettmpl=`<h3>{ { title}}</h3>`compile(tmpl).块block

       è¿™æ˜¯ä»€ä¹ˆæ„æ€å‘¢ï¼Ÿæ ¹æ®å°¤é›¨æºªæœ¬äººçš„解析，他说，根据他的统计那个动态的部分最多只有三分之一，基本上都是静态部分，所以在编译的过程中，能不能发现那个比较小的动态部分，把它放到比较靠上

Vue2源码细读-new Vue()初始化

       Vue.js 是一个数据驱动的前端框架，其核心是通过数据生成视图，开发者更关注数据模型与流转而非视图生成。

       从 new Vue() 开始，我们将探索 Vue 实例的创建过程。新创建的 Vue 实例本质上是一个 Vue 的实例对象。Vue 作为构造函数，只能通过 new 操作符创建实例，核心功能是调用初始化方法 _init，并传入参数。

       Vue 的实现中，构造函数定义了多个 mixin，这些 mixin 被挂载到 Vue.prototype，前台界面源码在哪以降低耦合度，便于维护。初始化流程包括多个模块的挂载，如初始化、数据状态、事件发布订阅、生命周期与渲染。

       初始化过程主要分为三个阶段：手动调用场景和组件场景。手动调用场景指直接创建的 Vue 实例，优先级高于组件场景。组件场景涉及全局或局部注册的组件，组件创建和继承通过 Vue.extend 实现。

       组件创建过程中，Vue.extend 用于获取组件构造函数，createComponent 则生成初始的 VNode。组件实例的微积分 指标源码创建发生在 patch 过程中，此时调用 init 钩子，真正创建组件实例。

       组件实例的 options 包含组件配置，通过对象赋值保存到实例中。在组件场景中，initInternalComponent 函数处理组件实例的初始化，包括设置组件选项和相关属性。

       综上所述，new Vue() 过程涉及构造函数的初始化、混合功能的挂载、配置的合并与组件的创建。这一过程在后续篇章中将详细分析。

       

参考资料：

[Vue.js 技术揭秘]( 合并配置 | Vue.js 技术揭秘)

本前端框架 VUE 学习书籍推荐

       Vue.js，作为一套强大的前端框架，着重于视图层的开发，旨在简化Web开发过程。以下是本推荐的Vue学习书籍，适合不同阶段的学习者和开发者深入了解和实践。

       实战与进阶

       《Vue.js 实战》：基于Vue 2的实战项目，适合新手和进阶开发者提升实战能力。

       《深入浅出 Vue.js》：源码层面解析，适合有一定前端基础的开发者深入学习。

       《Vue.js项目实战》：通过六个项目引导，帮助开发者理解和应用Vue。

       《Vue2 实践揭秘》：以实例讲解，适合快速掌握Vue 2入门技巧和实战经验。

       《Vue.js快跑:构建高性能Web应用》：全面指南，适合有一定HTML和JavaScript基础的开发者。

       快速入门与专业应用

       《Vue.js 前端开发：快速入门与专业应用》：从基础到项目实战，提升开发效率。

       《Vue.js 项目开发实战》：全面讲解Vue项目开发技术，适合初学者和进阶者。

       《Vue.js 从入门到项目实战》：从基础语法到项目重点应用，适合初学者和从业人员。

       深度与全面

       《Vue.js 权威指南》：全面讲解Vue语法及源码解析，适合各层次开发者。

       《Vue 企业开发实战》：以Vue 2实战项目，适合刚接触和提升经验的开发者。

慕课网上没搜到vue源码，有没有课程透彻分析Vue 源码的？

       有，你在实战里找是huangyi讲的，印象中是从 Vue 的跨平台编译入手，从 Vue 的几个核心能力开始分析Vue 源码。 Vue 的静态全局 API 与属性， Vue 的响应式原理，异步组件、组件化、diff 算法等等方面，都是进行了详细的分析，最后还附带了vuex和vuerouter。

Vue3核心源码解析 (一) ： 源码目录结构

       通过软件框架源码阅读，深入理解框架运行机制，API设计、原理及流程成为开发者进阶的关键。Vue 3源码相较于Vue 2版本的改进明显，采用Monorepo目录结构，引入TypeScript作为开发语言，新增特性和优化显著。

       启动Vue3源码，最新版本为V3.3.0-alpha.5。下载后进入core文件夹，使用Yarn进行构建。安装依赖后，执行npm run dev启动调试模式，可直观查看完整的源代码目录结构。

       核心模块包括compiler-core、compiler-dom、runtime-core、runtime-dom。compiler模块在编译阶段负责将.vue文件转译成浏览器可识别的.js文件，runtime模块则负责程序运行时的处理。reactivity目录内是响应式机制的源码，遵循Monorepo规范，每个子模块独立编译打包，通过require引入。

       构建Vue 3版本可使用命令，构建结果保存在core\packages\vue\dist目录下。选择性构建可通过命令实现，具体参数配置在core/rollup.config.js中查看。对于客户端编译模板，需构建完整版本，而使用Webpack的vue-loader时，.vue文件中的模板在构建时预编译，无需额外编译器。浏览器直接打开页面时采用完整版本，构建工具如Webpack引入运行时版本。Vue的构建脚本源码位于core/scripts下。