每一个小的练习都是一个小小的进步，今天理解一下vue的render函数并且通过配置实现页面的渲染，小小的懒慢慢的学。

js文件

new Vue({
    el: '#idRender',
    data: {},
    methods: {
        arrElement(create, config) {
            let me = this;
            let arr = [];
            if (!(config instanceof Object)) {
                console.log('not an object');
                return [];
            }
            if (config.children && config.children.length > 0) {
                config.children.forEach(function (it) {
                    arr.push(create(it.name, it.attrs, me.arrElement(create, it)))
                })
            } else {
                arr.push(config.content);
            }
            return arr;
        }
    },
    beforeCreate: function () {
        console.log('调用了beforeCreat钩子函数')
    },
    created: function () {
        console.log('调用了created钩子函数')
    },
    beforeMount: function () {
        console.log('调用了beforeMount钩子函数')
    },
    mounted: function () {
        console.log('调用了mounted钩子函数')
    },
    render: function (cElement) {
        let me = this;
        console.log('render');
      //页面相关配置
        let config = {
            name: 'ul',
            attrs: {},
            children: [
                {
                    name: 'li',
                    attrs: {},
                    content: '111',
                    children: [
                        {
                            name: 'span',
                            attrs: {},
                            content: '第一条记录'
                        }
                    ]
                },
                {
                    name: 'li',
                    attrs: {},
                    children: [
                        {
                            name: 'span',
                            attrs: {},
                            content: '第二1条记录'
                        }, {
                            name: 'span',
                            attrs: {},
                            content: '第二2条记录'
                        }, {
                            name: 'span',
                            attrs: {},
                            content: '第二3条记录'
                        }
                    ]
                },
            ]
        }
        return cElement('div', {}, me.arrElement(cElement, config))
    }
})

参考资料vue render 函数：

createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者一个返回值类型为 String/Object 的函数，必要参数
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

数据对象

  // 和`v-bind:class`一样的 API
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件内部使用 `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意事项：不能对绑定的旧值设值
  // Vue 会为您持续追踪
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}