现在我们已经了解了什么是虚拟 DOM，它其实就是用 JS 对象来描述真实的 DOM 结构。 那么，虚拟 DOM 是如何变成真实 DOM 并渲染到浏览器页面中的呢？这就用到了我们接下来要介绍的：渲染器。

渲染器的作用就是把虚拟 DOM 渲染为真实 DOM，如图 3-1 所示。

图3-1　渲染器的作用

渲染器是非常重要的角色，大家平时编写的 Vue.js 组件都是依赖渲染器来工作的，因此后面我们会专门讲解渲染器。 不过这里有必要先初步认识渲染器，以便更好地理解 Vue.js 的工作原理。

假设我们有如下虚拟 DOM：

const vnode = {
  tag: 'div',
  props: {
    onClick: () => alert('hello')
  },
  children: 'click me'
}

首先简单解释一下上面这段代码。

• tag 用来描述标签名称，所以 tag: 'div' 描述的就是一个 <div> 标签。
• props 是一个对象，用来描述 <div> 标签的属性、事件等内容。可以看到，我们希望给 div 绑定一个点击事件。