详解Vue渲染函数render的使用

简介

Vue提供了一个名为render的函数来代替模板语法，可以构建出与模板完全等效的虚拟DOM树。如同模板一样，render函数接受createElement函数作为第一个参数来创建虚拟DOM。但相比之下，render函数有更多的灵活性，也更加适合复杂的场景。

本篇攻略将详细讲解Vue渲染函数render及其使用方法，包括createElement函数的基本使用、渲染常见的几个HTML标签以及一些示例说明。

createElement函数的基本使用

createElement函数使用方式：createElement(sel, data, children)。其中，sel表示标签名，data是一个对象，用来设置元素的属性，children是其子元素。

render: function (createElement) {
  return createElement(
    'div', //标签名
    {
      attrs: {
        id: 'app'
      }
    },
    [
      //子元素
      createElement('p', 'hello world'),
      createElement('button', 'click me')
    ]
  )
}

渲染常见的几个HTML标签

文本节点

render: function (createElement) {
  return createElement('p', 'Hello world')
}

元素节点

render: function (createElement) {
  return createElement('div', [
    createElement('h1', 'Title'),
    createElement('p', 'Content'),
  ])
}

属性

render: function (createElement) {
  return createElement('a', {
    attrs: {
      href: 'https://www.example.com'
    }
  }, 'click me')
}

动态文本

render: function (createElement) {
  return createElement('p', 'The time is ' + new Date().toLocaleString())
}

条件渲染

render: function (createElement) {
  var show = true
  return createElement('div', [
    show ? createElement('p', 'Visible') : createElement('p', { style: { display: 'none' } }, 'Hidden')
  ])
}

示例说明

示例1：动态渲染列表

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' }
      ]
    }
  },
  render(createElement) {
    return createElement('div', [
      createElement('ul', this.list.map(function(item) {
        return createElement('li', {
          key: item.id
        }, item.name)
      }))
    ])
  }
}
</script>

示例2：渲染博客文章

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {
        title: 'Hello Vue render',
        content: 'This is a render function tutorial.'
      }
    }
  },
  render(createElement) {
    return createElement('div', [
      createElement('h1', this.article.title),
      createElement('p', this.article.content)
    ])
  }
}
</script>

以上是Vue渲染函数render的使用攻略，相信对于Vue渲染函数的使用有了更加深入的认识。