Vue模板编译原理

Vue 3 发布在即，本来想着直接看看 Vue 3 的模板编译，但是我打开 Vue 3 源码的时候，发现我好像连 Vue 2 是怎么编译模板的都不知道。从小鲁迅就告诉我们，不能一口吃成一个胖子，那我只能回头看看 Vue 2 的模板编译源码，至于 Vue 3 就留到正式发布的时候再看。

创新互联公司 - 雅安移动机房，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，雅安移动机房，西南服务器托管，四川/成都大带宽，成都机柜租用，四川老牌ＩＤＣ服务商

Vue 的版本
很多人使用 Vue 的时候，都是直接通过 vue-cli 生成的模板代码，并不知道 Vue 其实提供了两个构建版本。

 
 
 
 
    
  
  
  
  
  1. vue.js：完整版本，包含了模板编译的能力；
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. vue.runtime.js：运行时版本，不提供模板编译能力，需要通过 vue-loader 进行提前编译。
    2.

Vue不同构建版本

完整版与运行时版区别
简单来说，就是如果你用了 vue-loader ，就可以使用 vue.runtime.min.js，将模板编译的过程交过 vue-loader，如果你是在浏览器中直接通过 script 标签引入 Vue，需要使用 vue.min.js，运行的时候编译模板。

编译入口

 
 
 
 
    
  
  
  
  
  1. 了解了 Vue 的版本，我们看看 Vue 完整版的入口文件（src/platforms/web/entry-runtime-with-compiler.js）。
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. // 省略了部分代码，只保留了关键部分
    2. 
  
  
  
  
  2. import { compileToFunctions } from './compiler/index'
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. const mount = Vue.prototype.$mount
    5. 
  
  
  
  
  5. Vue.prototype.$mount = function (el) {
    6. 
  
  
  
  
  6.   const options = this.$options
    7. 
  
  
  
  
  7.   
    8. 
  
  
  
  
  8.   // 如果没有 render 方法，则进行 template 编译
    9. 
  
  
  
  
  9.   if (!options.render) {
    10. 
  
  
  
  
  10.     let template = options.template
    11. 
  
  
  
  
  11.     if (template) {
    12. 
  
  
  
  
  12.       // 调用 compileToFunctions，编译 template，得到 render 方法
    13. 
  
  
  
  
  13.       const { render, staticRenderFns } = compileToFunctions(template, {
    14. 
  
  
  
  
  14.         shouldDecodeNewlines,
    15. 
  
  
  
  
  15.         shouldDecodeNewlinesForHref,
    16. 
  
  
  
  
  16.         delimiters: options.delimiters,
    17. 
  
  
  
  
  17.         comments: options.comments
    18. 
  
  
  
  
  18.       }, this)
    19. 
  
  
  
  
  19.       // 这里的 render 方法就是生成生成虚拟 DOM 的方法
    20. 
  
  
  
  
  20.       options.render = render
    21. 
  
  
  
  
  21.     }
    22. 
  
  
  
  
  22.   }
    23. 
  
  
  
  
  23.   return mount.call(this, el, hydrating)
    24. 
  
  
  
  
  24. }
    25. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. 再看看 ./compiler/index 文件的 compileToFunctions 方法从何而来。
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. import { baseOptions } from './options'
    2. 
  
  
  
  
  2. import { createCompiler } from 'compiler/index'
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. // 通过 createCompiler 方法生成编译函数
    5. 
  
  
  
  
  5. const { compile, compileToFunctions } = createCompiler(baseOptions)
    6. 
  
  
  
  
  6. export { compile, compileToFunctions }
    7.

后续的主要逻辑都在 compiler 模块中，这一块有些绕，因为本文不是做源码分析，就不贴整段源码了。简单看看这一段的逻辑是怎么样的。

 
 
 
 
    
  
  
  
  
  1. export function createCompiler(baseOptions) {
    2. 
  
  
  
  
  2.   const baseCompile = (template, options) => {
    3. 
  
  
  
  
  3.     // 解析 html，转化为 ast
    4. 
  
  
  
  
  4.     const ast = parse(template.trim(), options)
    5. 
  
  
  
  
  5.     // 优化 ast，标记静态节点
    6. 
  
  
  
  
  6.     optimize(ast, options)
    7. 
  
  
  
  
  7.     // 将 ast 转化为可执行代码
    8. 
  
  
  
  
  8.     const code = generate(ast, options)
    9. 
  
  
  
  
  9.     return {
    10. 
  
  
  
  
  10.       ast,
    11. 
  
  
  
  
  11.       render: code.render,
    12. 
  
  
  
  
  12.       staticRenderFns: code.staticRenderFns
    13. 
  
  
  
  
  13.     }
    14. 
  
  
  
  
  14.   }
    15. 
  
  
  
  
  15.   const compile = (template, options) => {
    16. 
  
  
  
  
  16.     const tips = []
    17. 
  
  
  
  
  17.     const errors = []
    18. 
  
  
  
  
  18.     // 收集编译过程中的错误信息
    19. 
  
  
  
  
  19.     options.warn = (msg, tip) => {
    20. 
  
  
  
  
  20.       (tip ? tips : errors).push(msg)
    21. 
  
  
  
  
  21.     }
    22. 
  
  
  
  
  22.     // 编译
    23. 
  
  
  
  
  23.     const compiled = baseCompile(template, options)
    24. 
  
  
  
  
  24.     compiled.errors = errors
    25. 
  
  
  
  
  25.     compiled.tips = tips
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     return compiled
    28. 
  
  
  
  
  28.   }
    29. 
  
  
  
  
  29.   const createCompileToFunctionFn = () => {
    30. 
  
  
  
  
  30.     // 编译缓存
    31. 
  
  
  
  
  31.     const cache = Object.create(null)
    32. 
  
  
  
  
  32.     return (template, options, vm) => {
    33. 
  
  
  
  
  33.       // 已编译模板直接走缓存
    34. 
  
  
  
  
  34.       if (cache[template]) {
    35. 
  
  
  
  
  35.         return cache[template]
    36. 
  
  
  
  
  36.       }
    37. 
  
  
  
  
  37.       const compiled = compile(template, options)
    38. 
  
  
  
  
  38.      return (cache[key] = compiled)
    39. 
  
  
  
  
  39.     }
    40. 
  
  
  
  
  40.   }
    41. 
  
  
  
  
  41.   return {
    42. 
  
  
  
  
  42.     compile,
    43. 
  
  
  
  
  43.     compileToFunctions: createCompileToFunctionFn(compile)
    44. 
  
  
  
  
  44.   }
    45. 
  
  
  
  
  45. }
    46.

主流程
可以看到主要的编译逻辑基本都在 baseCompile 方法内，主要分为三个步骤：

模板编译，将模板代码转化为 AST；
优化 AST，方便后续虚拟 DOM 更新；
生成代码，将 AST 转化为可执行的代码；

 
 
 
 
    
  
  
  
  
  1. const baseCompile = (template, options) => {
    2. 
  
  
  
  
  2.   // 解析 html，转化为 ast
    3. 
  
  
  
  
  3.   const ast = parse(template.trim(), options)
    4. 
  
  
  
  
  4.   // 优化 ast，标记静态节点
    5. 
  
  
  
  
  5.   optimize(ast, options)
    6. 
  
  
  
  
  6.   // 将 ast 转化为可执行代码
    7. 
  
  
  
  
  7.   const code = generate(ast, options)
    8. 
  
  
  
  
  8.   return {
    9. 
  
  
  
  
  9.     ast,
    10. 
  
  
  
  
  10.     render: code.render,
    11. 
  
  
  
  
  11.     staticRenderFns: code.staticRenderFns
    12. 
  
  
  
  
  12.   }
    13. 
  
  
  
  
  13. }
    14.

parse
AST
首先看到 parse 方法，该方法的主要作用就是解析 HTML，并转化为 AST（抽象语法树），接触过 ESLint、Babel 的同学肯定对 AST 不陌生，我们可以先看看经过 parse 之后的 AST 长什么样。

下面是一段普普通通的 Vue 模板：

 
 
 
 
    
  
  
  
  
  1. new Vue({
    2. 
  
  
  
  
  2.   el: '#app',
    3. 
  
  
  
  
  3.   template: `
    4. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.       {{message}}
    6. 
  
  
  
  
  6.       showName
    7. 
  
  
  
  
  7.     
  •   `,
  •   data: {
  •     name: 'shenfq',
  •     message: 'Hello Vue!'
  •   },
  •   methods: {
  •     showName() {
  •       alert(this.name)
  •     }
  •   }
  • })

    • 经过 parse 之后的 AST：

    Template AST
    AST 为一个树形结构的对象，每一层表示一个节点，第一层就是 div（tag: "div"）。div 的子节点都在 children 属性中，分别是 h2 标签、空行、button 标签。我们还可以注意到有一个用来标记节点类型的属性：type，这里 div 的 type 为 1，表示是一个元素节点，type 一共有三种类型：

    元素节点；
    表达式；
    文本；
    在 h2 和 button 标签之间的空行就是 type 为 3 的文本节点，而 h2 标签下就是一个表达式节点。

    解析HTML
    parse 的整体逻辑较为复杂，我们可以先简化一下代码，看看 parse 的流程。

     
 
 
 
      
  
  
  
  
    1. import { parseHTML } from './html-parser'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export function parse(template, options) {
      4. 
  
  
  
  
    4.   let root
      5. 
  
  
  
  
    5.   parseHTML(template, {
      6. 
  
  
  
  
    6.     // some options...
      7. 
  
  
  
  
    7.     start() {}, // 解析到标签位置开始的回调
      8. 
  
  
  
  
    8.     end() {}, // 解析到标签位置结束的回调
      9. 
  
  
  
  
    9.     chars() {}, // 解析到文本时的回调
      10. 
  
  
  
  
    10.     comment() {} // 解析到注释时的回调
      11. 
  
  
  
  
    11.   })
      12. 
  
  
  
  
    12.   return root
      13. 
  
  
  
  
    13. }
      14.

    可以看到 parse 主要通过 parseHTML 进行工作，这个 parseHTML 本身来自于开源库：simple html parser，只不过经过了 Vue 团队的一些修改，修复了相关 issue。

    HTML parser
    下面我们一起来理一理 parseHTML 的逻辑。

     
 
 
 
      
  
  
  
  
    1. export function parseHTML(html, options) {
      2. 
  
  
  
  
    2.   let index = 0
      3. 
  
  
  
  
    3.   let last,lastTag
      4. 
  
  
  
  
    4.   const stack = []
      5. 
  
  
  
  
    5.   while(html) {
      6. 
  
  
  
  
    6.     last = html
      7. 
  
  
  
  
    7.     let textEnd = html.indexOf('<')
      8. 
  
  
  
  
    8. 
  
  
  
  
    9.     // "<" 字符在当前 html 字符串开始位置
      10. 
  
  
  
  
    10.     if (textEnd === 0) {
      11. 
  
  
  
  
    11.       // 1、匹配到注释: 
      12. 
  
  
  
  
    12.       if (/^
  
  
  
  
    13.         const commentEnd = html.indexOf('-->')
      14. 
  
  
  
  
    14.         if (commentEnd >= 0) {
      15. 
  
  
  
  
    15.           // 调用 options.comment 回调，传入注释内容
      16. 
  
  
  
  
    16.           options.comment(html.substring(4, commentEnd))
      17. 
  
  
  
  
    17.           // 裁切掉注释部分
      18. 
  
  
  
  
    18.           advance(commentEnd + 3)
      19. 
  
  
  
  
    19.           continue
      20. 
  
  
  
  
    20.         }
      21. 
  
  
  
  
    21.       }
      22. 
  
  
  
  
    22. 
  
  
  
  
    23.       // 2、匹配到条件注释:   
      24. 
  
  
  
  
    24.       if (/^
  
  
  
  
    25.         // ... 逻辑与匹配到注释类似
      26. 
  
  
  
  
    26.       }
      27. 
  
  
  
  
    27. 
  
  
  
  
    28.       // 3、匹配到 Doctype: 
      29. 
  
  
  
  
    29.       const doctypeMatch = html.match(/^]+>/i)
      30. 
  
  
  
  
    30.       if (doctypeMatch) {
      31. 
  
  
  
  
    31.         // ... 逻辑与匹配到注释类似
      32. 
  
  
  
  
    32.       }
      33. 
  
  
  
  
    33. 
  
  
  
  
    34.       // 4、匹配到结束标签: 
  •       const endTagMatch = html.match(endTag)
  •       if (endTagMatch) {}
  •       // 5、匹配到开始标签: 
  •       const startTagMatch = parseStartTag()
  •       if (startTagMatch) {}
  •     }
  •     // "<" 字符在当前 html 字符串中间位置
  •     let text, rest, next
  •     if (textEnd > 0) {
  •       // 提取中间字符
  •       rest = html.slice(textEnd)
  •       // 这一部分当成文本处理
  •       text = html.substring(0, textEnd)
  •       advance(textEnd)
  •     }
  •     // "<" 字符在当前 html 字符串中不存在
  •     if (textEnd < 0) {
  •       text = html
  •       html = ''
  •     }
  •     
  •     // 如果存在 text 文本
  •     // 调用 options.chars 回调，传入 text 文本
  •     if (options.chars && text) {
  •       // 字符相关回调
  •       options.chars(text)
  •     }
  •   }
  •   // 向前推进，裁切 html
  •   function advance(n) {
  •     index += n
  •     html = html.substring(n)
  •   }
  • }

    • 上述代码为简化后的 parseHTML，while 循环中每次截取一段 html 文本，然后通过正则判断文本的类型进行处理，这就类似于编译原理中常用的有限状态机。每次拿到 "<" 字符前后的文本，"<" 字符前的就当做文本处理，"<" 字符后的通过正则判断，可推算出有限的几种状态。

    其他的逻辑处理都不复杂，主要是开始标签与结束标签，我们先看看关于开始标签与结束标签相关的正则。

     
 
 
 
      
  
  
  
  
    1. const ncname = '[a-zA-Z_][\\w\\-\\.]*'
      2. 
  
  
  
  
    2. const qnameCapture = `((?:${ncname}\\:)?${ncname})`
      3. 
  
  
  
  
    3. const startTagOpen = new RegExp(`^<${qnameCapture}`)
      4.

    这段正则看起来很长，但是理清之后也不是很难。这里推荐一个正则可视化工具。我们到工具上看看startTagOpen：

    startTagOpen
    这里比较疑惑的点就是为什么 tagName 会存在 :，这个是 XML 的 命名空间，现在已经很少使用了，我们可以直接忽略，所以我们简化一下这个正则：

     
 
 
 
      
  
  
  
  
    1. const ncname = '[a-zA-Z_][\\w\\-\\.]*'
      2. 
  
  
  
  
    2. const startTagOpen = new RegExp(`^<${ncname}`)
      3. 
  
  
  
  
    3. const startTagClose = /^\s*(\/?)>/
      4. 
  
  
  
  
    4. const endTag = new RegExp(`^<\\/${ncname}[^>]*>`)
      5.

    startTagOpen

    endTag
    除了上面关于标签开始和结束的正则，还有一段用来提取标签属性的正则，真的是又臭又长。

     
 
 
 
      
  
  
  
  
    1. const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
      2.

    把正则放到工具上就一目了然了，以 = 为分界，前面为属性的名字，后面为属性的值。

    attribute
    理清正则后可以更加方便我们看后面的代码。

     
 
 
 
      
  
  
  
  
    1. while(html) {
      2. 
  
  
  
  
    2.   last = html
      3. 
  
  
  
  
    3.   let textEnd = html.indexOf('<')
      4. 
  
  
  
  
    4. 
  
  
  
  
    5.   // "<" 字符在当前 html 字符串开始位置
      6. 
  
  
  
  
    6.   if (textEnd === 0) {
      7. 
  
  
  
  
    7.     // some code ...
      8. 
  
  
  
  
    8. 
  
  
  
  
    9.     // 4、匹配到标签结束位置: 
  •     const endTagMatch = html.match(endTag)
  •     if (endTagMatch) {
  •       const curIndex = index
  •       advance(endTagMatch[0].length)
  •       parseEndTag(endTagMatch[1], curIndex, index)
  •       continue
  •     }
  •     // 5、匹配到标签开始位置: 
  •     const startTagMatch = parseStartTag()
  •     if (startTagMatch) {
  •       handleStartTag(startTagMatch)
  •       continue
  •     }
  •   }
  • }
  • // 向前推进，裁切 html
  • function advance(n) {
  •   index += n
  •   html = html.substring(n)
  • }
  • // 判断是否标签开始位置，如果是，则提取标签名以及相关属性
  • function parseStartTag () {
  •   // 提取 
  •   const start = html.match(startTagOpen)
  •   if (start) {
  •     const [fullStr, tag] = start
  •     const match = {
  •       attrs: [],
  •       start: index,
  •       tagName: tag,
  •     }
  •     advance(fullStr.length)
  •     let end, attr
  •     // 递归提取属性，直到出现 ">" 或 "/>" 字符
  •     while (
  •       !(end = html.match(startTagClose)) &&
  •       (attr = html.match(attribute))
  •     ) {
  •       advance(attr[0].length)
  •       match.attrs.push(attr)
  •     }
  •     if (end) {
  •       // 如果是 "/>" 表示单标签
  •       match.unarySlash = end[1]
  •       advance(end[0].length)
  •       match.end = index
  •       return match
  •     }
  •   }
  • }
  • // 处理开始标签
  • function handleStartTag (match) {
  •   const tagName = match.tagName
  •   const unary = match.unarySlash
  •   const len = match.attrs.length
  •   const attrs = new Array(len)
  •   for (let i = 0; i < l; i++) {
  •     const args = match.attrs[i]
  •     // 这里的 3、4、5 分别对应三种不同复制属性的方式
  •     // 3: attr="xxx" 双引号
  •     // 4: attr='xxx' 单引号
  •     // 5: attr=xxx   省略引号
  •     const value = args[3] || args[4] || args[5] || ''
  •     attrs[i] = {
  •       name: args[1],
  •       value
  •     }
  •   }
  •   if (!unary) {
  •     // 非单标签，入栈
  •     stack.push({
  •       tag: tagName,
  •       lowerCasedTag:
  •       tagName.toLowerCase(),
  •       attrs: attrs
  •     })
  •     lastTag = tagName
  •   }
  •   if (options.start) {
  •     // 开始标签的回调
  •     options.start(tagName, attrs, unary, match.start, match.end)
  •   }
  • }
  • // 处理闭合标签
  • function parseEndTag (tagName, start, end) {
  •   let pos, lowerCasedTagName
  •   if (start == null) start = index
  •   if (end == null) end = index
  •   if (tagName) {
  •     lowerCasedTagName = tagName.toLowerCase()
  •   }
  •   // 在栈内查找相同类型的未闭合标签
  •   if (tagName) {
  •     for (pos = stack.length - 1; pos >= 0; pos--) {
  •       if (stack[pos].lowerCasedTag === lowerCasedTagName) {
  •         break
  •       }
  •     }
  •   } else {
  •     pos = 0
  •   }
  •   if (pos >= 0) {
  •     // 关闭该标签内的未闭合标签，更新堆栈
  •     for (let i = stack.length - 1; i >= pos; i--) {
  •       if (options.end) {
  •         // end 回调
  •         options.end(stack[i].tag, start, end)
  •       }
  •     }
  •     // 堆栈中删除已关闭标签
  •     stack.length = pos
  •     lastTag = pos && stack[pos - 1].tag
  •   }
  • }

    • 在解析开始标签的时候，如果该标签不是单标签，会将该标签放入到一个堆栈当中，每次闭合标签的时候，会从栈顶向下查找同名标签，直到找到同名标签，这个操作会闭合同名标签上面的所有标签。接下来我们举个例子：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      test
      3. 
  
  
  
  
    3.   
      4. 
  
  
  
  
    4.   
      5. 
  
  
  
  
    5.

    在解析了 div 和 h2 的开始标签后，栈内就存在了两个元素。h2 闭合后，就会将 h2 出栈。然后会解析两个未闭合的 p 标签，此时，栈内存在三个元素（div、p、p）。如果这个时候，解析了 div 的闭合标签，除了将 div 闭合外，div 内两个未闭合的 p 标签也会跟随闭合，此时栈被清空。

    为了便于理解，特地录制了一个动图，如下：

    入栈与出栈
    理清了 parseHTML 的逻辑后，我们回到调用 parseHTML 的位置，调用该方法的时候，一共会传入四个回调，分别对应标签的开始和结束、文本、注释。

     
 
 
 
      
  
  
  
  
    1. parseHTML(template, {
      2. 
  
  
  
  
    2.   // some options...
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.   // 解析到标签位置开始的回调
      5. 
  
  
  
  
    5.   start(tag, attrs, unary) {},
      6. 
  
  
  
  
    6.   // 解析到标签位置结束的回调
      7. 
  
  
  
  
    7.   end(tag) {},
      8. 
  
  
  
  
    8.   // 解析到文本时的回调
      9. 
  
  
  
  
    9.   chars(text: string) {},
      10. 
  
  
  
  
    10.   // 解析到注释时的回调
      11. 
  
  
  
  
    11.   comment(text: string) {}
      12. 
  
  
  
  
    12. })
      13.

    处理开始标签
    首先看解析到开始标签时，会生成一个 AST 节点，然后处理标签上的属性，最后将 AST 节点放入树形结构中。

     
 
 
 
      
  
  
  
  
    1. function makeAttrsMap(attrs) {
      2. 
  
  
  
  
    2.   const map = {}
      3. 
  
  
  
  
    3.   for (let i = 0, l = attrs.length; i < l; i++) {
      4. 
  
  
  
  
    4.     const { name, value } = attrs[i]
      5. 
  
  
  
  
    5.     map[name] = value
      6. 
  
  
  
  
    6.   }
      7. 
  
  
  
  
    7.   return map
      8. 
  
  
  
  
    8. }
      9. 
  
  
  
  
    9. function createASTElement(tag, attrs, parent) {
      10. 
  
  
  
  
    10.   const attrsList = attrs
      11. 
  
  
  
  
    11.   const attrsMap = makeAttrsMap(attrsList)
      12. 
  
  
  
  
    12.   return {
      13. 
  
  
  
  
    13.     type: 1,       // 节点类型
      14. 
  
  
  
  
    14.     tag,           // 节点名称
      15. 
  
  
  
  
    15.     attrsMap,      // 节点属性映射
      16. 
  
  
  
  
    16.     attrsList,     // 节点属性数组
      17. 
  
  
  
  
    17.     parent,        // 父节点
      18. 
  
  
  
  
    18.     children: [],  // 子节点
      19. 
  
  
  
  
    19.   }
      20. 
  
  
  
  
    20. }
      21. 
  
  
  
  
    21. 
  
  
  
  
    22. const stack = []
      23. 
  
  
  
  
    23. let root // 根节点
      24. 
  
  
  
  
    24. let currentParent // 暂存当前的父节点
      25. 
  
  
  
  
    25. parseHTML(template, {
      26. 
  
  
  
  
    26.   // some options...
      27. 
  
  
  
  
    27. 
  
  
  
  
    28.   // 解析到标签位置开始的回调
      29. 
  
  
  
  
    29.   start(tag, attrs, unary) {
      30. 
  
  
  
  
    30.     // 创建 AST 节点
      31. 
  
  
  
  
    31.     let element = createASTElement(tag, attrs, currentParent)
      32. 
  
  
  
  
    32. 
  
  
  
  
    33.     // 处理指令: v-for v-if v-once
      34. 
  
  
  
  
    34.     processFor(element)
      35. 
  
  
  
  
    35.     processIf(element)
      36. 
  
  
  
  
    36.     processOnce(element)
      37. 
  
  
  
  
    37.     processElement(element, options)
      38. 
  
  
  
  
    38. 
  
  
  
  
    39.     // 处理 AST 树
      40. 
  
  
  
  
    40.     // 根节点不存在，则设置该元素为根节点
      41. 
  
  
  
  
    41.     if (!root) {
      42. 
  
  
  
  
    42.       root = element
      43. 
  
  
  
  
    43.       checkRootConstraints(root)
      44. 
  
  
  
  
    44.     }
      45. 
  
  
  
  
    45.     // 存在父节点
      46. 
  
  
  
  
    46.     if (currentParent) {
      47. 
  
  
  
  
    47.       // 将该元素推入父节点的子节点中
      48. 
  
  
  
  
    48.       currentParent.children.push(element)
      49. 
  
  
  
  
    49.       element.parent = currentParent
      50. 
  
  
  
  
    50.     }
      51. 
  
  
  
  
    51.     if (!unary) {
      52. 
  
  
  
  
    52.      // 非单标签需要入栈，且切换当前父元素的位置
      53. 
  
  
  
  
    53.       currentParent = element
      54. 
  
  
  
  
    54.       stack.push(element)
      55. 
  
  
  
  
    55.     }
      56. 
  
  
  
  
    56.   }
      57. 
  
  
  
  
    57. })
      58.

    处理结束标签
    标签结束的逻辑就比较简单了，只需要去除栈内最后一个未闭合标签，进行闭合即可。

     
 
 
 
      
  
  
  
  
    1. parseHTML(template, {
      2. 
  
  
  
  
    2.   // some options...
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.   // 解析到标签位置结束的回调
      5. 
  
  
  
  
    5.   end() {
      6. 
  
  
  
  
    6.     const element = stack[stack.length - 1]
      7. 
  
  
  
  
    7.     const lastNode = element.children[element.children.length - 1]
      8. 
  
  
  
  
    8.     // 处理尾部空格的情况
      9. 
  
  
  
  
    9.     if (lastNode && lastNode.type === 3 && lastNode.text === ' ') {
      10. 
  
  
  
  
    10.       element.children.pop()
      11. 
  
  
  
  
    11.     }
      12. 
  
  
  
  
    12.     // 出栈，重置当前的父节点
      13. 
  
  
  
  
    13.     stack.length -= 1
      14. 
  
  
  
  
    14.     currentParent = stack[stack.length - 1]
      15. 
  
  
  
  
    15.   }
      16. 
  
  
  
  
    16. })
      17.

    处理文本
    处理完标签后，还需要对标签内的文本进行处理。文本的处理分两种情况，一种是带表达式的文本，还一种就是纯静态的文本。

     
 
 
 
      
  
  
  
  
    1. parseHTML(template, {
      2. 
  
  
  
  
    2.   // some options...
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.   // 解析到文本时的回调
      5. 
  
  
  
  
    5.   chars(text) {
      6. 
  
  
  
  
    6.     if (!currentParent) {
      7. 
  
  
  
  
    7.       // 文本节点外如果没有父节点则不处理
      8. 
  
  
  
  
    8.       return
      9. 
  
  
  
  
    9.     }
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.     const children = currentParent.children
      12. 
  
  
  
  
    12.     text = text.trim()
      13. 
  
  
  
  
    13.     if (text) {
      14. 
  
  
  
  
    14.       // parseText 用来解析表达式
      15. 
  
  
  
  
    15.       // delimiters 表示表达式标识符，默认为 ['{{', '}}']
      16. 
  
  
  
  
    16.       const res = parseText(text, delimiters))
      17. 
  
  
  
  
    17.       if (res) {
      18. 
  
  
  
  
    18.         // 表达式
      19. 
  
  
  
  
    19.         children.push({
      20. 
  
  
  
  
    20.           type: 2,
      21. 
  
  
  
  
    21.           expression: res.expression,
      22. 
  
  
  
  
    22.           tokens: res.tokens,
      23. 
  
  
  
  
    23.           text
      24. 
  
  
  
  
    24.         })
      25. 
  
  
  
  
    25.       } else {
      26. 
  
  
  
  
    26.         // 静态文本
      27. 
  
  
  
  
    27.         children.push({
      28. 
  
  
  
  
    28.           type: 3,
      29. 
  
  
  
  
    29.           text
      30. 
  
  
  
  
    30.         })
      31. 
  
  
  
  
    31.       }
      32. 
  
  
  
  
    32.     }
      33. 
  
  
  
  
    33.   }
      34. 
  
  
  
  
    34. })
      35.

    下面我们看看 parseText 如何解析表达式。

     
 
 
 
      
  
  
  
  
    1. // 构造匹配表达式的正则
      2. 
  
  
  
  
    2. const buildRegex = delimiters => {
      3. 
  
  
  
  
    3.   const open = delimiters[0]
      4. 
  
  
  
  
    4.   const close = delimiters[1]
      5. 
  
  
  
  
    5.   return new RegExp(open + '((?:.|\\n)+?)' + close, 'g')
      6. 
  
  
  
  
    6. }
      7. 
  
  
  
  
    7. 
  
  
  
  
    8. function parseText (text, delimiters){
      9. 
  
  
  
  
    9.   // delimiters 默认为 {{ }}
      10. 
  
  
  
  
    10.   const tagRE = buildRegex(delimiters || ['{{', '}}'])
      11. 
  
  
  
  
    11.   // 未匹配到表达式，直接返回
      12. 
  
  
  
  
    12.   if (!tagRE.test(text)) {
      13. 
  
  
  
  
    13.     return
      14. 
  
  
  
  
    14.   }
      15. 
  
  
  
  
    15.   const tokens = []
      16. 
  
  
  
  
    16.   const rawTokens = []
      17. 
  
  
  
  
    17.   let lastIndex = tagRE.lastIndex = 0
      18. 
  
  
  
  
    18.   let match, index, tokenValue
      19. 
  
  
  
  
    19.   while ((match = tagRE.exec(text))) {
      20. 
  
  
  
  
    20.     // 表达式开始的位置
      21. 
  
  
  
  
    21.     index = match.index
      22. 
  
  
  
  
    22.     // 提取表达式开始位置前面的静态字符，放入 token 中
      23. 
  
  
  
  
    23.     if (index > lastIndex) {
      24. 
  
  
  
  
    24.       rawTokens.push(tokenValue = text.slice(lastIndex, index))
      25. 
  
  
  
  
    25.       tokens.push(JSON.stringify(tokenValue))
      26. 
  
  
  
  
    26.     }
      27. 
  
  
  
  
    27.     // 提取表达式内部的内容，使用 _s() 方法包裹
      28. 
  
  
  
  
    28.     const exp = match[1].trim()
      29. 
  
  
  
  
    29.     tokens.push(`_s(${exp})`)
      30. 
  
  
  
  
    30.     rawTokens.push({ '@binding': exp })
      31. 
  
  
  
  
    31.     lastIndex = index + match[0].length
      32. 
  
  
  
  
    32.   }
      33. 
  
  
  
  
    33.   // 表达式后面还有其他静态字符，放入 token 中
      34. 
  
  
  
  
    34.   if (lastIndex < text.length) {
      35. 
  
  
  
  
    35.     rawTokens.push(tokenValue = text.slice(lastIndex))
      36. 
  
  
  
  
    36.     tokens.push(JSON.stringify(tokenValue))
      37. 
  
  
  
  
    37.   }
      38. 
  
  
  
  
    38.   return {
      39. 
  
  
  
  
    39.     expression: tokens.join('+'),
      40. 
  
  
  
  
    40.     tokens: rawTokens
      41. 
  
  
  
  
    41.   }
      42. 
  
  
  
  
    42. }
      43.

    首先通过一段正则来提取表达式：

    提取表达式
    看代码可能有点难，我们直接看例子，这里有一个包含表达式的文本。

     
 
 
 
      
  
  
  
  
    1. 是否登录：{{isLogin ? '是' : '否'}}
      2.

    运行结果

    解析文本
    optimize
    通过上述一些列处理，我们就得到了 Vue 模板的 AST。由于 Vue 是响应式设计，所以拿到 AST 之后还需要进行一系列优化，确保静态的数据不会进入虚拟 DOM 的更新阶段，以此来优化性能。

     
 
 
 
      
  
  
  
  
    1. export function optimize (root, options) {
      2. 
  
  
  
  
    2.   if (!root) return
      3. 
  
  
  
  
    3.   // 标记静态节点
      4. 
  
  
  
  
    4.   markStatic(root)
      5. 
  
  
  
  
    5. }
      6.

    简单来说，就是把所以静态节点的 static 属性设置为 true。

     
 
 
 
      
  
  
  
  
    1. function isStatic (node) {
      2. 
  
  
  
  
    2.   if (node.type === 2) { // 表达式，返回 false
      3. 
  
  
  
  
    3.     return false
      4. 
  
  
  
  
    4.   }
      5. 
  
  
  
  
    5.   if (node.type === 3) { // 静态文本，返回 true
      6. 
  
  
  
  
    6.     return true
      7. 
  
  
  
  
    7.   }
      8. 
  
  
  
  
    8.   // 此处省略了部分条件
      9. 
  
  
  
  
    9.   return !!(
      10. 
  
  
  
  
    10.     !node.hasBindings && // 没有动态绑定
      11. 
  
  
  
  
    11.     !node.if && !node.for && // 没有 v-if/v-for
      12. 
  
  
  
  
    12.     !isBuiltInTag(node.tag) && // 不是内置组件 slot/component
      13. 
  
  
  
  
    13.     !isDirectChildOfTemplateFor(node) && // 不在 template for 循环内
      14. 
  
  
  
  
    14.     Object.keys(node).every(isStaticKey) // 非静态节点
      15. 
  
  
  
  
    15.   )
      16. 
  
  
  
  
    16. }
      17. 
  
  
  
  
    17. 
  
  
  
  
    18. function markStatic (node) {
      19. 
  
  
  
  
    19.   node.static = isStatic(node)
      20. 
  
  
  
  
    20.   if (node.type === 1) {
      21. 
  
  
  
  
    21.     // 如果是元素节点，需要遍历所有子节点
      22. 
  
  
  
  
    22.     for (let i = 0, l = node.children.length; i < l; i++) {
      23. 
  
  
  
  
    23.       const child = node.children[i]
      24. 
  
  
  
  
    24.       markStatic(child)
      25. 
  
  
  
  
    25.       if (!child.static) {
      26. 
  
  
  
  
    26.         // 如果有一个子节点不是静态节点，则该节点也必须是动态的
      27. 
  
  
  
  
    27.         node.static = false
      28. 
  
  
  
  
    28.       }
      29. 
  
  
  
  
    29.     }
      30. 
  
  
  
  
    30.   }
      31. 
  
  
  
  
    31. }
      32.

    generate
    得到优化的 AST 之后，就需要将 AST 转化为 render 方法。还是用之前的模板，先看看生成的代码长什么样：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   {{message}}
      3. 
  
  
  
  
    3.   showName
      4. 
  
  
  
  
    4. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. {
      2. 
  
  
  
  
    2.   render: "with(this){return _c('div',[(message)?_c('h2',[_v(_s(message))]):_e(),_v(" "),_c('button',{on:{"click":showName}},[_v("showName")])])}"
      3. 
  
  
  
  
    3. }
      4.

    将生成的代码展开：

     
 
 
 
      
  
  
  
  
    1. with (this) {
      2. 
  
  
  
  
    2.     return _c(
      3. 
  
  
  
  
    3.       'div',
      4. 
  
  
  
  
    4.       [
      5. 
  
  
  
  
    5.         (message) ? _c('h2', [_v(_s(message))]) : _e(),
      6. 
  
  
  
  
    6.         _v(' '),
      7. 
  
  
  
  
    7.         _c('button', { on: { click: showName } }, [_v('showName')])
      8. 
  
  
  
  
    8.       ])
      9. 
  
  
  
  
    9.     ;
      10. 
  
  
  
  
    10. }
      11.

    看到这里一堆的下划线肯定很懵逼，这里的 _c 对应的是虚拟 DOM 中的 createElement 方法。其他的下划线方法在 core/instance/render-helpers 中都有定义，每个方法具体做了什么不做展开。

    render-helpers`
    具体转化方法就是一些简单的字符拼接，下面是简化了逻辑的部分，不做过多讲述。

     
 
 
 
      
  
  
  
  
    1. export function generate(ast, options) {
      2. 
  
  
  
  
    2.   const state = new CodegenState(options)
      3. 
  
  
  
  
    3.               
      
                网站题目：Vue模板编译原理
                
      
                文章源于：http://www.36103.cn/qtweb/news28/25078.html
            
      
            
      
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            
      
        
        
      
            
      猜你还喜欢下面的内容
      
            
        
      
    
    
      
        
      
            
      面包屑导航知识
      
            
        
      
        
      
            
      行业网站建设
      
            
        
      
    
      


      
    
      
        响应式网站　　 　成都能净科技　　 　新都四新网站建设　　 　名片印刷　　 　化妆品企业网站建设方案　　 　成都app软件开发　　 　成都网站制作　　 　手机APP开发　　 　成都定制网站　　 　四川黔盛装饰　　 　钢筋机械设备　　 　企业网站设计　　 　微信开发　　 　网站制作公司　　 　成都网站优化　　 　帝美豪门窗　　 　芦山网站建设　　 　微信公众号二次开发　　 　成都高电机柜租用　　 　广元双南建站