Vue.js render函数那些事儿

大多时候，我会使用template, vue单文件去渲染组件。虽然知道Vue中有个render函数，但却很少在项目中去主动使用它。使用最多的地方是在使用一些UI框架的时候，比如iview table中的按钮操作，会使用到render函数。另外平时在阅读一些Vue UI框架源码的时候，也时常能遇到使用render函数的地方，这也激发了自己研究学习的欲望。如果你也感兴趣，那就继续阅读吧。

在本文中，会有如下内容：

• 什么是Vue render函数
• Vue编译器如何处理render函数
• 创建一个组件
• 在render函数中使用指令
• Vue渲染函数中的事件绑定
• 模板覆盖的实际用例

让我们开始吧！

什么是Vue render函数

Vue.js模板功能强大，几乎可以满足我们在应用程序中所需的一切。但是，有一些场景下，比如基于输入或插槽值创建动态组件，render函数可以更好地满足这些用例。

那些来自React世界的开发者可能对render函数非常熟悉。通常在JSX中使用它们来构建React组件。虽然Vue渲染函数也可以用JSX编写，但我们将继续使用原始JS，有助于我们可以更轻松地了解Vue组件系统的基础。。

每个Vue组件都实现了一个render函数。大多数时候，该函数将由Vue编译器创建。当我们在组件上指定模板时，该模板的内容将由Vue编译器处理，编译器最终将返回render函数。渲染函数本质上返回一个虚拟DOM节点，该节点将被Vue在浏览器DOM中渲染。

现在又引出了虚拟DOM的概念，“虚拟DOM到底是什么？”

虚拟文档对象模型（或"DOM"）允许Vue在更新浏览器之前在其内存中渲染组件。这使一切变得更快，同时也避免了DOM重新渲染的高昂成本。因为每个DOM节点对象包含很多属性和方法，因此使用虚拟DOM预先在内存进行操作，可以省去很多浏览器直接创建DOM节点对象的开销。

Vue更新浏览器DOM时，会将更新的虚拟DOM与上一个虚拟DOM进行比较，并仅使用已修改的部分更新实际DOM。这意味着更少的元素更改，从而提高了性能。Render函数返回虚拟DOM节点，在Vue生态系统中通常称为VNode，该接口是允许Vue在浏览器DOM中写入这些对象的接口。它们包含使用Vue所需的所有信息。 Vue的下一版本将包含一个全新的虚拟DOM实现，该实现将比目前更快。 React，Riot，Inferno等许多其他框架也使用虚拟DOM的概念。

我们可以在任何Vue组件中实现Vue render函数。同样，由于Vue的数据响应性，每当组件的数据得到更新时，都会再次调用render函数。

这是一个简单的示例，说明如何直接使用组件中的render函数去渲染h1标签：

new Vue({
  el: '#app',
  render(createElement) {
    return createElement('h1', 'Hello world');
  }
});

有一些内置组件可以利用渲染函数的功能，例如transition和keep-alive。这些组件直接在渲染函数中操纵VNode。如果Vue没有提供这个函数特性，这些功能将无法实现。

Vue编译器如何处理render函数？

大多数时候，Vue渲染函数将在项目构建期间由Vue编译器进行编译（例如，使用Webpack）。因此，编译器不会最终出现在您的生产代码中，从而减小了包的体积。这就是为什么当您使用"单个文件组件"时，除非我们确实需要/想要，否则您实际上不需要使用render函数。

但是，如果我们想在代码中使用编译器，则可以使用带有编译器的Vue版本。简而言之，我们正在使用Vue编译器来编译自定义模板。假设我们在做一个电商项目，那么可以将其注入购物车，从而可以拥有更多的控制。

我们编写了一个实现自定义渲染功能的组件，该功能可获取用户创建的模板并替换我们的默认模板。

这是一个如何使用编译器将模板字符串编译为渲染函数的快速示例：

const template = `
<ul>
  <li v-for="item in items">
   {
  { item }}
  </li>
</ul>