Vue2系列 — 渲染函数 (render + createElement)

官网文档：https://v2.cn.vuejs.org/v2/guide/render-function.html

1 render 函数

render 函数
不使用模板，使用 js 生成虚拟 dom

2 createElement()

接受的参数：

• 参数1 节点类型
• 参数2 attribute
• 参数3 子节点

3 DEMO

<template>
  <div class="container">
    
    
    
    
    
    <anchored-heading :level="1">Hello world!anchored-heading>
    <anchored-heading :level="2">Hello world!anchored-heading>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11

main.js

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      // 参数1 节点类型 {String | Object | Function}
      'h' + this.level,   // 标签名称
      // 参数2 attribute {Object} 可选
      {
        'class': {
          foo: true
        },
        style: {
          color: 'red'
        },
      },
      // 参数3 子节点 {String | Array} 可选
      '123' // 文本节点
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

4 使用 JavaScript 代替模板功能(v-if/v-for/v-model…)

官方文档：https://v2.cn.vuejs.org/v2/guide/render-function.html