3.4 模板的工作原理

编译器把模板编译成渲染函数，从而让「写模板」和「手写渲染函数」殊途同归。

一、编译器的职责

• 对编译器来说，模板只是一个普通字符串，它会分析该字符串并生成一个功能等价的渲染函数。
• 一个 .vue 文件就是一个组件：<template> 里的内容是模板，编译器把它编译成渲染函数，并添加到 <script> 导出对象的 render 上。

<template>
  <div @click="handler">
    click me
  </div>
</template>

编译后等价于：

export default {
  render() {
    return h('div', { onClick: handler }, 'click me')
  }
}

二、Vue.js 渲染页面的流程

模板(template) --编译器--> 渲染函数(render) --执行--> 虚拟 DOM(vnode) --渲染器--> 真实 DOM

• 无论用模板还是直接手写渲染函数，组件要渲染的内容最终都由渲染函数产生；
• 渲染器再把渲染函数返回的虚拟 DOM 渲染为真实 DOM。

模板和渲染函数只是「描述 UI 的两种入口」，编译之后走的是同一条路，所以两者的能力上限是一致的。

相关

• 3.1 声明式地描述 UI：模板与虚拟 DOM 两种描述方式
• 3.5 Vue.js 是各个模块组成的有机整体：编译器与渲染器如何协作