总结

• 模板编译会生成render 函数
• 执行render 函数会返回vnode
• 基于vnode 执行 patch 和 地方放

const compiler = require('vue-template-compiler')

// 插值
const template = `<p>{{message}}</p>`
const res = compiler.compile(template)
console.log(res.render)
// with(this){return createElement('p',[createTextVNode(toString(message))])}
// h -> vnode
// createElement -> vnode

Vue的模板编译器底层原理是将Vue模板转换为渲染函数，主要包括以下几个步骤：

const baseCompile = (template, options) => {
  // 解析 html，转化为 ast
  const ast = parse(template.trim(), options)
  // 优化 ast，标记静态节点
  optimize(ast, options)
  // 将 ast 转化为可执行代码
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
}

• 解析模板：模板编译器会将模板解析为一个抽象语法树(AST)，这个AST可以表示模板中的每一个节点、属性、指令等。

• 优化AST：模板编译器会对AST进行优化，包括静态节点提升、静态属性提升、条件语句优化等，以便减少渲染函数的创建和执行时间。
• 生成渲染函数：模板编译器会根据优化后的AST生成一个渲染函数，这个渲染函数可以接收一个数据对象作为参数，并返回一个VNode节点树。

render函数其实就是一个带有with语法的字符串：

with(this){
    return _c('div',{attrs:{"id":"app"}},
    [_c('p',{staticClass:"test",staticStyle:{"background":"red"}},
    [_v("是"+_s(msg)+_s(msg))]),_v(" "),_c('div',[_v("ss")])])
}

• 生成虚拟dom 有了render函数，调用就可以生成虚拟dom（vnode），生成的时间就是在mount。Vue.prototype.mount。
  Vue.prototype.mount。Vue.prototype.mount里面调用了mountComponent。

通过使用模板编译器，Vue可以将模板转换为渲染函数，并通过执行渲染函数生成VNode节点树。这个过程是Vue的核心之一，使Vue可以在浏览器中高效地渲染页面。