调试模板编译过程

狐七 Vue

# 模板html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>compile</title>
</head>
<body>
  <div id="app">
    <!-- 静态根节点 -->
    <h1>Vue<span>模板编译过程</span></h1>
    <!-- 有插值表达式，不是静态根节点 -->
    <div>{{ msg }}<p>hello</p></div>
    <!-- 没有字标签，不是静态根节点 -->
    <div>是否显示</div>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello compiler',
        isShow: false
      },
      methods: {
        handler () {
          console.log('test')
        }
      }
    })
  </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 设置断点

入口文件entry-runtime-with-compile.js中的compileToFunctions函数上设置断点

按F5刷新

# 开始调试

按F11进入compileToFunctions函数，按F10到check cache的部分

这个位置是使用字符串模板作为key来缓存中查找是否有编译好的渲染函数，如果有就直接返回，否则继续往下执行，这里首次渲染，还没有缓存的函数，所以继续向下执行.

执行到compile函数，开始编译模板

按F11进入compile函数，在这个函数中，首先合并options选项

继续往下找到baseCompile的执行函数，设置断点，并按F8执行到这个断点

按F11进入这个函数，这是模板编译的核心位置，三件事情，把模板字符串转换成ast对象，优化ast对象，把优化后的ast对象转换成字符串形式的代码.下面是第一件事情，将模板字符串转换成ast对象，可以看到ast对象里面有type，tag，属性，parent和children等，不过目前还没有static属性