vue模板编译，源码调试过程本文已参与「新人创作礼」活动，一起开启掘金创作之路。 vue模板编译，源码调试过程：为什么进

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1、为什么进行模板编译

在vue中，template中可以写表达式，条件渲染，循环渲染，点击事件等，这些在html中是不可以实现的，只能在js中实现，所以vue对他进行了处理，处理的方法就是模板编译为render函数，执行render函数，返回vnode

2、模板编译过程：

1. 入口compileToFunctions()函数——src/platforms/web/entry-runtime-with-compiler.js

2. 进入compilerToFunctions()函数，src/compiler/to-function.js中的createCompileToFunctionFn()方法

主要作用：

判断有无缓存的编译对象，如果有直接返回，第一次进入时没有缓存

const key = options.delimiters
  ? String(options.delimiters) + template
  : template
// 1. 判断有无缓存的编译对象compileFunctionResult，如果有直接返回
if (cache[key]) {
  return cache[key]
}

compile把模板编译为编译对象(render,staticRenderFns),字符串形式的js代码

const compiled = compile(template, options)

createFunction将字符串形式js代码转换为js方法

res.render = createFunction(compiled.render, fnGenErrors)
res.staticRenderFns = compiled.staticRenderFns.map(code => {
  // 把数组中每一项转为render方法
  return createFunction(code, fnGenErrors)
})

缓存并返回res对象

// 4. 缓存并返回res对象(render,staticRenderFns方法)
return (cache[key] = res)

3. compile主要作用：a. 合并选项；b. 调用baseCompile(template.trim(), finalOptions)

/src/compiler/create-compiler.js——createCompilerCreator()方法

a. 合并选项

// 创建一个没有原型的对象finalOptions，用来合入baseOptions和complie传入的options
const finalOptions = Object.create(baseOptions)
// 编译过程中出现的错误和信息
const errors = []
const tips = []
......
// ！！！baseCompile模板编译核心函数，把模板编译成render函数,返回一个函数
// 函数中有两个成员，render,staticRenderFns,此时存储的是字符串js代码
const compiled = baseCompile(template.trim(), finalOptions)

b. 调用baseCompile()方法（src/compiler/index.js——createCompilerCreator(function baseCompile (){...})）

export const createCompiler = createCompilerCreator(function baseCompile (
  // 模板，用户传入的参数
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 将template转为ast抽象语法树
  // parse传入两值，去空格的模板，合入的options
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    // 优化抽象语法树
    optimize(ast, options)
  }
  // 将抽象语法树转为 字符串类型 js
  const code = generate(ast, options)
  return {
    // 抽象语法树
    ast,
    // 渲染函数，此时的render是字符串形式的，还需要调用toFunction转为js方法
    render: code.render,
    // 静态渲染函数
    staticRenderFns: code.staticRenderFns
  }
})

主要有3个作用:

通过parse将模板编译为抽象语法树ast
- 遍历html，转换为ast对象，也就是普通对象
- 相关的html指令/属性记录在ast相应对象的属性上
1. ast，抽象语法树 抽象语法树，abstract syntax tree,ast; 使用对象的形式描述树形代码结构; 此处的ast是描述属性结构的HTML字符串

2. 为什么使用抽象语法树 模板字符串转换为ast后，可通过ast对模板进行优化 标记模板中的静态代码，patch的时候可跳过静态内容 在patch过程中静态代码不需要对比和重新渲染 使用babel也是先将代码转为ast，再将代码进行降级
优化抽象语法树ast，标记静态节点与静态根节点
- markStatic标记静态节点，判断node.type，=2表达式不标记，=3文本静态标记；=1标签元素，遍历子节点标记静态节点
- markStaticRoots标记静态根节点，静态根节点（标签包含文本，有静态子标签；标签只是纯文本不是静态根节点，因为优化成本大于收益）
generate将抽象语法树转为字符串类型的js
- 通过genElement生成字符串的js代码
  1. 判断staticProcessed，用来标记是否被处理，如果已经被处理则不处理
  2. 处理once/if/for转为render指令；template,组件转为字符的js代码
  3. genChildren完成后生成了render函数中所需要的代码，使用_c传入tag,data,children
- staticRenderFns静态根节点处理

4. createFunction将字符串形式js代码转换为js方法

src/compiler/to-function.js——createFunction()

function createFunction (code, errors) {
  try {
    // 通过new Function转为js方法
    return new Function(code)
  } catch (err) {
    errors.push({ err, code })
    return noop
  }
}

3、with语法

with语法基础

const obj = {a: 100, b: 200}
console.log(obj.a) // 100
console.log(obj.b) // 200
console.log(obj.c) // undefined

with语法会改变{}内自由变量的查找规则，当作obj属性来查找
如果找不到匹配的obj属性，就会报错
with要慎用，它打破了作用域规则，易读性变差

with(obj) {
  console.log(a) // 100,相等于obj.a
  console.log(b) // 200
  console.log(c) // 报错
}

vue语句转为with语法

// 动态属性
<div id="div1" class="container">
  <img :src="imgUrl" />
 </div>
// 转变为
    with(this) {
      return _c('div',
        {staticClass: 'container', attrs:{'id':'div1'}},
        [
          _c('img',{attrs:{'src': imgUrl}})
        ]
      )
    }

// 条件
<div>
  <p v-if="flag==='a'">A</p>
  <p v-else>B</p>
</div>
// 转变为
with(this) {
  return _c('div',
    [
      (flag === 'a') ? _c('p',[_v('A')]) : _c('p', [_v('B')])
    ]
  )
}

// 循环
<ul>
  <li v-for="item in list" :key="item.id">{{item.title}}</li>
</ul>
// 转变为
with(this) {
  return _c('ul',
    [
      _l((list), 
        function(item) {
          return _c('li',{'key': item.id},[_v(_s(item.title))])
        }
      )
    ]
  )
}

// 事件
<button @click="clickHandler">submit</button>
// 转变为
 with(this) {
      return _c('button',
        {
          on: {"click":clickHandler}
        },
        [
          _v("submit")
        ]
      )
    }

// v-model
<input type="text" v-model="name">
// 转变为
with(this) {
  return _c('input',
    {
      directives:[{name:'model',rawName:'v-model',value:(name),expression:'name'}],
      attrs: {'type': 'text'},
      domProps: {'value':(name)},
      on: {'input': function($event){
        if($event.target.composing) {
          return;
        }
        // 主要是这，将值绑定
        name=$event.target.value
      }}
    }
  )
}

注意：在webpack vue-loader中，会在开发模式下进行编译，浏览器直接执行vnode