vue源码模板编译解析
Vue源码模板编译模板编译的主要目的是将模板（template）转换为渲染函数（render）。模板编译功能Vue2.x使用VNode来描述视图和各种交互。用户可以自己写VNode，比较复杂。用户只需要编写类HTML代码——Vue.js模板，模板由编译器转换为返回VNode的渲染函数。vue文件在构建过程中会被webpack转换为runtime版本的render函数（内部通过vue-loader），vuecli默认使用构建时的版本，体积大，构建速度慢查看模板编译结果Vue模板编译
{{msg}}
Vue.component("comp",{template:'
我是Comp
'})constvm=newVue({el:"#app",data:{msg:'HelloCompiler'},methods:{handler(){console.log('test')}}})console.log(vm.$options.render)获取renderwith的输出结果是为了说明下面_方法都是vue实例方法(functionanonymous(){with(this){return_c('div',//tagtag{attrs:{"id":"app"}},//数据用于描述tag[//childrendescribetagchildnode_m(0),//模板中的静态内容，对应上面的h1标签_v(""),//创建空白文本，两个标签之间的空格_c('p',[_v(_s(msg))]),//铬吃p标签对应的vnode，第二个参数是文本_v(""),_c('comp')],1//childrenflat)}})_c()definedinsrc/core/instance/render.js(hfunction,usedtocreatevnode)_m()/_v()/_s()definedinsrc/core/instance/render-helpers/index.js将html模板转化为render函数标签中的内容，空格为换行符，render会原样输出，没有相同的换行符空格，可以提高性能，减少内存占用。vue3对应的explorer已经做了优化，换行空格不会保留模板编译入口src/platforms/web/entry-runtime-with-compiler.js//converttemplatetorenderfunctionconst{render,staticRenderFns}=compileToFunctions(template,{outputSourceRange:process.env.NODE_ENV!=='production',shouldDecodeNewlines,shouldDecodeNewlinesForHref,delimiters:options.delimiters,comments:options.comments},this)这个方法会执行compile(template,options)开始编译compile定义在createCompilerCreator，会合并配置选项，调用baseCompile(template.trim(),finalOptions)baseCompile定义在createCompiler中，是改造的核心。主要做了三件事，将template转为ast语法树对象静态标记ast对象，打补丁时不比较静态节点差异，直接返回，提高效率。将ast对象转化为js对象，通过createFunction将js对象转化为匿名函数并解构，挂在vm实例上，编译过程结束ast语法树对象入口即为已添加的ast对象带有static标签，此时是转换后的js对象，此时在ast中标注了staticProcessed:true表示exportconstcreateCompiler=createCompilerCreator(functionbaseCompile(template:string,//templateoptions:CompilerOptions//合并后的选项):CompiledResult{//将模板转换成ast抽象语法树//抽象语法树用于以树的形式描述代码结构constast=parse(template.trim(),options)if(options.optimize!==false){//优化抽象语法树optimize(ast,options)}//将优化后的抽象语法树转化为字符串js代码constcode=generate(ast,options)//返回createCompiler对象return{ast,render:code.render,//渲染函数staticRenderFns:code.staticRenderFns//静态渲染函数，生成静态VNode树}})注：Vue2减少空行，占用内存，编译慢。Vue源码组件化。Vue组件是具有预定义选项的Vue实例。一个组件可以在页面上形成一个功能。完整区域，组件可以包含脚本、样式、模板组件就像搭积木，拥有组件就像搭积木。每个组件可以嵌套更小粒度的基础组件组件化让我们可以将页面拆分成多个可重用的组件查看组件注册全局组件源码src/core/global-api/index.js本地组件返回Vue构造器Vue.extend基于组件选项对象将参数转换为core/global-api/extend.js中定义的Vue构造函数的子类
