Vue Render函数用法示例

虽然在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 })