方法

从 Vue 仓库把源码克隆一份到本地，然后安装pnmp，安装依赖。然后在 package.json 添加一行命令：

json
"scripts": {
  "dev2": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:full-dev"
}

npm run dev2跑起来就好了。

示例

我们可以修改 Vue 源码，会实时地编译到 dist/vue.js 中。像这样子，这里修改 src/compiler/create-compiler.ts 的createCompilerCreator函数，使得浏览器把模板编译结果输出到控制台：

ts
export function createCompilerCreator(baseCompile: Function): Function {
  return function createCompiler(baseOptions: CompilerOptions) {
    function compile(
      template: string,
      options?: CompilerOptions
    ): CompiledResult {
      // ...
      const compiled = baseCompile(template.trim(), finalOptions)
      compiled.errors = errors
      compiled.tips = tips
      
      console.log(JSON.stringify(compiled, (() => {
        const seen = new WeakSet()
        return (key, value) => {
          if (typeof value === 'object' && value !== null) {
            if (seen.has(value)) {
              return '[Circular]'
            }
            seen.add(value)
          }
          return value
        };
      })(), 2));
      return compiled
    }
    return {
      compile,
      compileToFunctions: createCompileToFunctionFn(compile)
    }
  }
}

然后在 html 文件引入 dist/vue.js，

html
<script src="../../dist/vue.js"></script>
<div id="demo"></div>
<script type="text/x-template" id="template">
  <div>
    <div v-for="(item, index) in arr" @click="clickHandler">
      Current Value is {{ item }}
    </div>
  </div>
</script>
<script>
  const { ref } = Vue
  new Vue({
    name: 'Test',
    template: '#template',
    setup(props) {
      const arr = ref([
        1, 1, 4, 5, 1, 4
      ])
      const clickHandler = () => {}
      return {
        arr, clickHandler
      }
    }
  }).$mount('#demo')
</script>

我们来看浏览器控制台：

json
{
  "ast": {
    "type": 1,
    "tag": "div",
    "attrsList": [],
    "attrsMap": {},
    "rawAttrsMap": {},
    "children": [
      {
        "type": 1,
        "tag": "div",
        "attrsList": [
          {
            "name": "@click",
            "value": "clickHandler",
            "start": 44,
            "end": 65
          }
        ],
        "attrsMap": {
          "v-for": "(item, index) in arr",
          "@click": "clickHandler"
        },
        "rawAttrsMap": {
          "v-for": {
            "name": "v-for",
            "value": "(item, index) in arr",
            "start": 15,
            "end": 43
          },
          "@click": "[Circular]"
        },
        "parent": "[Circular]",
        "children": [
          {
            "type": 2,
            "expression": "\"\\n      Current Value is \"+_s(item)+\"\\n    \"",
            "tokens": [
              "\n      Current Value is ",
              {
                "@binding": "item"
              },
              "\n    "
            ],
            "text": "\n      Current Value is {{ item }}\n    ",
            "start": 66,
            "end": 105,
            "static": false
          }
        ],
        "start": 10,
        "end": 111,
        "for": "arr",
        "alias": "item",
        "iterator1": "index",
        "plain": false,
        "hasBindings": true,
        "events": {
          "click": {
            "value": "clickHandler",
            "dynamic": false,
            "start": 44,
            "end": 65
          }
        },
        "static": false,
        "staticRoot": false,
        "forProcessed": true
      }
    ],
    "start": 0,
    "end": 120,
    "plain": true,
    "static": false,
    "staticRoot": false
  },
  "render": "with(this){return _c('div',_l((arr),function(item,index){return _c('div',{on:{\"click\":clickHandler}},[_v(\"\\n      Current Value is \"+_s(item)+\"\\n    \")])}),0)}",
  "staticRenderFns": [],
  "errors": [],
  "tips": []
}

就可以看到变化了。这就是 html 中模板编译的结果，ast就是模板的抽象语法树，render就是产生虚拟 DOM 的函数字符串。