今天这篇文章打算学习Vue3和Vue2下模板编译的区别，以及VDOM下Diff算法的优化。在编译入口了解过Vue3的同学一定知道，Vue3引入了一个新的组合API。组件挂载阶段会调用setup方法，然后判断render方法是否存在。如果没有，将调用编译方法将模板转换为渲染。//packages/runtime-core/src/renderer.tsconstmountComponent=(initialVNode,container)=>{constinstance=(initialVNode.component=createComponentInstance(//...params))//调用设置setupComponent(instance)}//packages/runtime-core/src/component.tsletcompileexportfunctionregisterRuntimeCompiler(_compile){compile=_compile}exportfunctionsetupComponent(instance){constComponent=instance.typeconst{setup}=Componentif(setup){//...callsetup}if(compile&&Component.template&&!Component.render){//如果没有render方法//调用compile将template转换为render方法Component.render=compile(Component.template,{...})}}这部分是runtime-core中的代码。上一篇文章提到Vue分为完整版和运行时版。如果使用vue-loader处理.vue文件，一般会直接将.vue文件中的模板处理到render方法中。//需要编译器Vue.createApp({template:'
{{hi}}
'})//不需要Vue.createApp({render(){returnVue.h('div',{},this.hi)}})完整版和runtime版本的区别在于完整版会引入compile方法。如果是vue-cli生成的项目，这部分代码会被抹去，编译过程会放在打包阶段，优化性能。runtime-dom中提供了registerRuntimeCompiler方法用于注入compile方法。【外链图片传输失败，源站可能有防盗链机制，建议保存图片直接上传（img-sj0Ctvim-1665390661650）（https://p3-juejin.byteimg.com...)]主要流程在完整版index.js中，调用了registerRuntimeCompiler注入编译。接下来我们看看注入的compile方法主要做了什么。//packages/vue/src/index.tsimport{compile}from'@vue/compiler-dom'//编译缓存constcompileCache=Object.create(null)//注入编译方法functioncompileToFunction(//templatetemplate:string|HTMLElement,//Compilationconfigurationoptions?:CompilerOptions):RenderFunction{if(!isString(template)){//如果模板不是字符串//它被认为是DOM节点，获取innerHTMLif(template.nodeType){template=template.innerHTML}else{returnNOOP}}//如果缓存中存在，直接从缓存中获取constkey=templateconstcached=compileCache[key]if(cached){returncached}//如果存在是一个ID选择器，获取DOM元素后，取innerHTMLif(template[0]==='#'){constel=document.querySelector(template)template=el?el.innerHTML:''}//调用编译获取渲染代码const{code}=compile(template,options)//将渲染代码转换为函数constrender=newFunction(code)();//返回render方法时放入缓存return(compileCache[key]=render)}//注入compileregisterRuntimeCompiler(compileToFunction)在讲Vue2模板编译的时候已经提到了。编译方法主要分为三个步骤。Vue3的逻辑类似：模板编译，将模板代码转化为AST；优化AST以方便后续的虚拟DOM更新；生成代码，将AST转换为可执行代码；参考vue实战视频讲解：进入学习//packages/compiler-dom/src/index.tsimport{baseCompile,baseParse}from'@vue/compiler-core'exportfunctioncompile(template,options){returnbaseCompile(template,options)}//packages/compiler-core/src/compile.tsimport{baseParse}from'./parse'import{transform}from'./transform'import{transformIf}from'./transforms/vIf'import{transformFor}from'./transforms/vFor'import{transformText}from'./transforms/transformText'import{transformElement}from'./transforms/transformElement'import{transformOn}from'./transforms/vOn'import{transformBind}from'./transforms/vBind'import{transformModel}from'./transforms/vModel'exportfunctionbaseCompile(template,options){//解析html并转换为astconstast=baseParse(template,options)//优化ast，标记静态节点transform(ast,{...options,nodeTransforms:[transformIf,transformFor,transformText,transformElement,//...省略了一些转换],directiveTransforms:{on:transformOn,bind:transformBind,model:transformModel}})//将ast转换为可执行代码returngenerate(ast,options)}计算PatchFlag这里的大体逻辑和前面的没有太大区别。主要原因是optimize方法变成了transform方法，一些模板语法默认会进行transform。这些变换就是后续的虚拟DOM优化。关键，我们先看看transform的代码。//packages/compiler-core/src/transform.tsexportfunctiontransform(root,options){constcontext=createTransformContext(root,options)traverseNode(root,context)}exportfunctiontraverseNode(node,context){context.currentNode=nodeconst{nodeTransforms}=contextconstexitFns=[]for(leti=0;i