无论是手写虚拟 DOM（渲染函数）还是使用模板，都属于声明式地描述 UI，并且 Vue.js 同时支持这两种描述 UI 的方式。 上文中我们讲解了虚拟 DOM 是如何渲染成真实 DOM 的，那么模板是如何工作的呢？这就要提到 Vue.js 框架中的另外一个重要组成部分：编译器。

编译器和渲染器一样，只是一段程序而已，不过它们的工作内容不同。编译器的作用其实就是将模板编译为渲染函数，例如给出如下模板：

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

对于编译器来说，模板就是一个普通的字符串，它会分析该字符串并生成一个功能与之相同的渲染函数：

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

以我们熟悉的 .vue 文件为例，一个 .vue 文件就是一个组件，如下所示：

a.vue

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

<script>
  export default {
    data() { /* ... */ },
    methods: {
      handler: () => { /* ... */ }
    }
  }
</script>

其中 <template> 标签里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到 <script> 标签块的组件对象上，所以最终在浏览器里运行的代码就是：

🔔 提示

通俗的来说，Vue 的组件设计思想，每一个 Vue 组件分为两部分，即 template 标签 和 script 标签。 template 标签里的内容就是模板内容，编译器（compiler）会把模板内容（template 标签中编写的内容）编译成渲染函数（render 方法）并添加到 <script> 标签块中默认导出的组件对象上。

export default {
  data() { /* ... */ },
  methods: {
    handler: () => { /* ... */ }
  },
  render() {
    return h(
      'div',
      { onClick: handler },
      'click me'
    )
  }
}

所以，无论是使用模板（template 标签）还是直接手写渲染函数（script 中的 render 方法）， 对于一个组件来说，它要渲染的内容（即 render 方法的返回值）最终都是通过渲染函数产生的， 然后渲染器（renderer）再把渲染函数返回的虚拟 DOM 渲染为真实 DOM，这就是模板的工作原理，也是 Vue.js 渲染页面的流程。

编译器是一个比较大的话题，后面我们会着重讲解，这里大家只需要清楚编译器的作用及角色即可。