vur.js原理-模板编译

---

typora-copy-images-to: ..assets

作用： 将vue模板通过一系列过程处理，变成可以生成返回vnode的渲染函数。从而通过vnode渲染页面

将模板编译成渲染函数

大体可以分为三部分：

1. 解析器：将模板编译成AST(Abstract Syntax Tree)抽象语法树。本质就是和vnode差不多的不同js对象
2. 优化器：： 遍历AST，标记静态节点和静态根节点
3. 代码生成器：：使用AST生成渲染函数

1. 解析器

AST: 其实就是用js中的对象表示一个个的节点，一个对象代表一个节点。

解析器内部有很多子解析器，比如html解析器、文本解析器、过滤器解析器。最主要的是html解析器

html解析器

html解析器在遍历模板字符串的过程中，会不断触发钩子函数。html节点类型分为：元素节点、文本节点、注释节点

// 模板字符串
var template = `<div class="pack">
         <!-- 我是注释 -->
         <h2>这是标题</h2>
         <p>我是段落内容</p>
       </div>`

// parseHtml没解析出一个一块内容，就会从模板字符串中去掉该部分
parseHtml (template, {
  start(tag, attrs, unary) {
    // 当解析到开始标签位置时触发
  },
  end (){
   // 当解析到结束标签位置时触发
 }，
  chars (){
   // 当解析到文本节点时触发
 }，
  comment (){
   // 当解析到注释节点时触发
 } 
})

怎样表示节点之间的层级关系：栈。每当解析出一个开始标签，触发狗子start钩子函数的同时，将这个标签推入栈中，作为后面解析出来的标签对象的父节点对象；每当解析出一个结束标签时，就将栈中最右边的标签对象弹出来；始终以栈中最右边的标签作为下面解析出来的额标签的父节点对象

补充：栈还可以用来检测html标签是否正确闭合。当当前解析出的结束标签和栈中最右边的标签不一致，则在控制台打印警告提示

html解析器的运行的原理

1. 截取开始标签
   • 标签名
   • 属性
   • 解析自闭合标签
2. 截取结束标签
3. 截取注释节点
4. 截取条件注释（是什么东西）
5. 截取DOCTYPE
6. 截取文本
7. 纯文本元素解析：