Vue 中的 render 函数-JavaScript中文网-JavaScript教程资源分享门户

在 Vue 中，各种 UI 渲染都是通过 render 函数实现的。render 函数是 Vue 2.0 中引入的全新特性，它可以让我们像编写 HTML 一样编写 JavaScript，进一步提升了我们对 Vue 代码的掌控能力和灵活性。

render 函数的基本用法

render 函数的语法如下：

Vue.component('component-name', {
  render: function (createElement) {
    // 返回一个 VNode
  }
})

其中 createElement 是一个函数，它可以创建一个 virtual DOM 节点（即 VNode），类似于 React 中的虚拟 DOM，render 函数会将所有的 VNode 组成一个 VNode 数组，最后将其渲染为真实的 DOM。

举个例子，下面是一个简单的 render 函数：

Vue.component('hello-world', {
  render: function (createElement) {
    return createElement('div', 'hello world')
  }
})

这个 render 函数返回一个 VNode，它表示一个 div 节点，div 节点中的文本是 "hello world"。这样，我们就可以在模板中直接使用 hello-world 组件来展示 "hello world"。

相比于模板，render 函数有以下优势。

模板只能渲染静态的 HTML，而 render 函数可以根据数据来实现动态渲染。下面是一个简单的 render 函数，它可以根据传入的数据中的名字动态渲染欢迎语句。

Vue.component('greet', {
  props: ['name'],
  render: function (createElement) {
    return createElement('div', `Hello, ${this.name}!`)
  }
})

这个组件可以在模板中这样使用：

<greet name="John"></greet>

它会渲染出一个 div 节点，内容是 "Hello, John!"。当父组件传入的 name 发生变化时，这个组件也会随之动态更新。

有些 UI 逻辑非常复杂，用模板来写会非常麻烦。而渲染函数可以在 JavaScript 中实现复杂逻辑，并将其渲染为 VNode，在实现复杂 UI 时非常有用。

渲染函数中的每个参数都有着明确的类型和语义，总体上来说比模板更容易阅读和维护。

我们可以使用 JSX 来编写 render 函数，这样可以更直观地表达 VNode 结构，提高代码可读性。

首先，需要安装和配置一个支持 JSX 的工具，比如 Babel。然后，在 Vue 组件中，只需要写一个类似于以下代码的渲染函数：

render() {
  return <div>Hello, {this.props.name}!</div>
}

这个渲染函数会被 Babel 编译成适合 Vue 使用的 JavaScript 代码。

注意，需要将组件中的 render 函数改为 render()，这是 JSX 的语法规定。

在渲染函数中，我们可以嵌套使用其它的组件，从而构建出复杂的 UI。下面是一个渲染函数的例子，它结合了 JSX 和组件嵌套的用法。

render() {
  return (
    <div>
      <h1>Welcome</h1>
      <UserList users={this.state.users} />
    </div>
  )
}

这个渲染函数中，先渲染了一个 h1 标签，然后使用了一个名为 UserList 的组件，并将组件的 users 属性设置为当前组件的 state.users。这个渲染函数中的 JSX 语法让代码更直观易懂，非常适合构建复杂的 UI。

除了组件嵌套，我们还可以在渲染函数中使用条件语句、循环语句等 JavaScript 语言特性，以实现更加复杂的 UI 展示逻辑。

render 函数在 Vue 中扮演着非常重要的角色，它可以让我们实现动态渲染、复杂逻辑以及可读性更高的代码。当我们需要构建复杂的 UI 时，渲染函数是一个非常好的选择，它可以让我们更加灵活和精细地控制 UI 呈现和交互逻辑。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/645e0a2e968c7c53b0072872