vue中的render函数使用

Vue中的render函数是用来生成虚拟DOM的函数，可以手动编写模板，也可以直接使用JavaScript进行操作。

下面是一个简单的例子，用render函数生成一个简单的div元素：

new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement('div', 'Hello World!')
  }
})

在以上代码中，createElement是一个函数，它接收三个参数：元素类型、元素属性和元素内容。在这个例子中，我们传入了'div'作为元素类型和'Hello World!'作为元素内容。

当Vue实例挂载到页面上时，Vue会根据render函数生成虚拟DOM，然后再根据虚拟DOM生成真实的DOM节点，最终渲染到页面上。

除了简单的div元素，我们还可以用render函数生成更复杂的组件和模板，例如：

new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement('ul', [
      createElement('li', 'Apple'),
      createElement('li', 'Banana'),
      createElement('li', 'Orange')
    ])
  }
})

在这个例子中，我们生成了一个包含三个li元素的ul列表。我们可以看到，render函数的语法与模板语法非常相似，因此我们可以用render函数代替模板进行开发。