什么是模板编译？下面本篇文章带大家聊聊vue中的模板编译，探讨一下模板编译原理，希望对大家有所帮助！
vue提供了模板语法，允许我们声明式地描述状态和dom之间的绑定关系，比如e388a4556c0f65e1904146cc1a846bee{{name}}e388a4556c0f65e1904146cc1a846bee。
模板编译指的是模板将编译成render函数的过程，渲染函数的作用是每次执行时，会根据最新状态生成新的vnode。
编译的过程是：模板作为输入 -> 模板编译 阶段->生成 渲染函数
面试题vue的模板编译？模板编译compiler中render讲解？vue 模板编译的过程，每一个过程细说一下做了些什么模板编译，谁去解析ast树 【相关推荐：vuejs视频教程、web前端开发】将模板编译成渲染函数
解析器：将模板解析为ast(abstract syntax tree 抽象语法树)优化器：遍历ast标记静态节点,因为静态节点不可变，不需要为打上标签的静态节点创建新的虚拟节点，直接克隆已有的虚拟节点。代码生成器：使用ast生成渲染函数。将ast转换成代码字符串。将代码字符串放入渲染函数中，导出被外界使用。案例
1.模板确认假设如下代码,有el、template、render、$mount
//复杂案例let vue = new vue({ el: '#app', data() { return { a: 1, b: [1] } }, render(h) { return h('div', { id: 'hhh' }, 'hello') }, template: `<div id='hhh' style="aa:1;bb:2"><a>{{xxx}}{{ccc}}</a></div>`}).$mount('#app')console.log(vue)//脚手架创建的案例let vue = new vue({ render: h => h(app)}).$mount('#app')
1）渲染到哪个根节点上：判断有无el属性，有的话直接获取el根节点，没有的话调用$mount时去获取根节点
2）渲染哪个模板到根节点上去：是否调用render 函数传入了模板 render: h => h(app) -> <app></app>
有render：这时候优先执行render函数，render优先级 > template无render：有template：template解析成render函数的所需格式-代码字符串，并使用调用render函数渲染无template：el根节点的outerhtml解析成render函数的所需格式-代码字符串，并使用调用render函数渲染
3.渲染的方式：无论什么情况，最后都统一是要使用render函数渲染2.解析器-将模板解析成ast解析器-将模板解析成ast
<div> <p>{{name}}</p></div>
将上述模板解析成ast后,ast抽象语法树就是使用js中的对象来描述一个节点，一个对象表示一个节点。
{ tag: "div" type: 1, //节点类型 staticroot: false, static: false, plain: true, parent: undefined, //存放父节点 attrslist: [], attrsmap: {}, children: [ //存放孩子节点 { tag: "p" type: 1, staticroot: false, static: false, plain: true, parent: {tag: "div", ...}, attrslist: [], attrsmap: {}, children: [{ type: 2, text: "{{name}}", static: false, expression: "_s(name)" }] } ]}
解析器的工作原理解析器的原理的是一小段一小段地截取模板字符串，每截取一小段字符串，就会根据截取出来的字符串类型触发不同的钩子函数，直到模板字符串截空停止。然后使用栈来确定层级关系
解析器内部分也分几个子解析器，如html解析器、文本解析器等。
html解析器的作用是解析html，在解析html的过程中不断触发各种钩子函数，
开始标签的钩子函数中可以构建元素类型的节点文本钩子函数中可以构建文本类型的节点注释钩子函数中可以构建注释类型的节点结束标签钩子函数文本解析器是对html解析出来的文本进行二次加工，比如插值语法{{}}
如何确定dom之间的层级关系？使用栈
在触发开始标签的钩子函数时，如果当前标签不是自闭合标签，就push进stack。
在触发结束标签的钩子函数时，就从栈中pop出战
3.优化器-标记ast中的静态节点标记静态子树的好处
每次重新渲染时，不需要为静态子树创建新虚拟子树，克隆已存在的静态子树在虚拟dom中打补丁(patching)的过程可以跳过 ，静态子树是不可变的优化器的内部实现主要分两步用递归的方式将所有节点添加 static 属性，true表示是静态的，false表示不是静态的。
在ast中找出所有静态节点并打上标记
静态节点:dom不会发生变化的节点
通过递归的方式从上向下标记静态节点，如果一个节点被标记为静态节点，但它的子节点却被标记为动态节点，就说明该节点不是静态节点，可以将它改为动态节点。静态节点的特征是它的子节点也必须是静态的。静态根节点也是静态节点
**在ast中找出所有静态根节点并打上标记 **
静态根节点:子节点全是静态节点的节点
使用递归从上向下寻找，在寻找的过程中遇见的第一个静态节点就为静态根节点，同时不继续往下找。如果一个静态根节点的子节点只有一个文本节点或没有子节点，那么不会标记成静态根节点，即使他们是，因为优化成本大于收益
怎么判断是否静态节点?
在将模板字符串解析成ast的时候，会根据不同的文本类型设置一个 type
type说明是否时静态节点
1 元素节点 进行一些排除
2 带遍历的动态文本节点 不是
3 不带遍历的纯文本节点 是
4.代码生成器-将ast转化成渲染函数中的代码字符串代码生成器的作用:将ast转化成渲染函数中的代码字符串
<div> <p>{{name}}</p></div>//生成的render渲染函数{ render: `with(this){return _c('div',[_c('p',[_v(_s(name))])])}`}//格式化后with(this){ return _c( 'div', [ _c( 'p', [ _v(_s(name)) ] ) ] )}
生成代码字符串是一个递归的过程，从顶向下依次处理每一个ast节点。
节点有三种类型，分别对应三种不同的创建方法与别名。
类型创建方法别名
元素节点 createelement _c
文本节点 createtextvnode _v
注释节点 createemptyvnode _e
渲染函数可以生成vnode的原因:渲染函数其实是执行了createelement，而createelement可以创建vnode。
代码字符串的拼接过程
递归ast来生成字符串，最先生成根节点，然后在子节点字符串生成后，将其拼接在根节点的参数中，子节点的子节点拼接在子节点的参数中，一层层拼接。
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是vue学习之聊聊模板编译原理的详细内容。