Vue Render 函数介绍和使用

Vue 的渲染函数 让您可以使用 JSX （React 的 JavaScript 超集）构建组件。Vue 如此引人注目的原因之一是您可以使用原生 JavaScript 构建 Vue 应用程序——您不一定需要 JSX。 但是如果你是从 React 升级到 Vue，使用 Vue 的渲染函数可以让切换更加舒适。

Hello, Render!

您可以创建一个具有 render 功能。 当需要渲染组件时，Vue 调用 render() 具有单个参数的函数： createElement() 功能。

const app = new Vue({
  data: () => ({ user: 'World' }),
  render: function(createElement) {
    // `this` refers to the Vue instance, so you can
    // edit data.
    return createElement('h1', 'Hello, ' + this.user);
  }
});

使用 JSX

这 createElement() 功能类似于 React 的顶层 createElement() 功能 。 这意味着像 Babel  babeljs io/docs/en/babel-plugin-transform-react-jsx 器可以将下面的 JSX Vue 实例转换为前面的示例。

/** @jsx createElement */

const app = new Vue({
  data: () => ({ user: 'World' }),
  render: function(createElement) {
    return (<h1>{this.user}</h1>);
  }
});

请注意 @jsx pragma 注释 上面 必须 与 createElement() 函数名。 该注释告诉编译器在将 JSX 转换为时使用什么函数 createElement() 来电。

数据输入

你不能使用内置的 Vue 指令，比如 v-for 和 v-model 带有渲染功能 。 你可以做的是使用第二个参数 createElement()_ 定义 on 处理程序 。

const app = new Vue({
  data: () => ({ count: 0 }),
  render: function(createElement) {
    return createElement('div', null, [
      createElement('h1', 'Count: ' + this.count),
      // Note that the **2nd** parameter is the `data` object. Otherwise,
      // `on` won't work.
      createElement('button', {
        domProps: {
          innerHTML: 'Increment'
        },
        on: { click: () => ++this.count }
      })
    ]);
  }
});

通过上面的例子，你可以点击 增量 按钮来增加 count 的值。