虽然在render里使用createElement函数创建DOM节点不是很直观，但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <my-component :list="list"></my-component> 12 </div> 13 <script src="vue.js"></script> 14 <script> 15 Vue.component('my-component', { 16 props: { 17 list: { 18 type: Array, 19 default: () => [] 20 } 21 }, 22 render(createElement) { 23 if (this.list.length) { 24 return createElement('ul', this.list.map(item => createElement('li', item))) 25 } else { 26 return createElement('p', 'Empty list') 27 } 28 } 29 }) 30 new Vue({ 31 el: '#app', 32 data: { 33 list: ['html', 'css', 'javascript'] 34 } 35 }) 36 </script> 37 </body> 38 </html>
另外，由于v-if，v-else，v-show等指令都无法在render里使用，需要自己手动实现，拿常用的v-model举个栗子：
1 Vue.component('my-component', { 2 data() { 3 return { 4 message: '' 5 } 6 }, 7 render(createElement) { 8 return createElement( 9 'div', 10 [ 11 createElement( 12 'input', 13 { 14 on: { 15 input: e => this.message = e.target.value 16 } 17 } 18 ), 19 createElement('p', this.message) 20 ] 21 ) 22 } 23 })