Vue函数式组件简单实现

html:

    <div id="root">
        <smart :items=items></smart>
    </div>

js:

  <script>
        let EmptyList = 'p';
        let TableList = 'ul';
        let OrderedList = 'ul';
        let UnorderedList = 'ol';
        Vue.component('smart', {
            functional: true,
            props: {
                items: {
                    type: Array,
                    required: true
                },
                isOrdered: Boolean
            },
            render: function(createElement, context) {
                function appropriateListComponent() {
                    let items = context.props.items;

                    if (items.length === 0) return EmptyList;
                    if (typeof items[0] === 'object') return TableList;
                    if (context.props.isOrdered) return OrderedList;

                    return UnorderedList;
                }

                return createElement(
                    appropriateListComponent(),
                    Array.apply(null, {
                        length: context.props.items.length
                    }).map(function(value, index) {
                        return createElement('li', context.props.items[index].name)
                    })
                )
            }
        })
        var vm = new Vue({
            el: '#root',
            data: {
                items: [{
                    name: '张三'
                }, {
                    name: '李四'
                }]
            }
        })
    </script>

分析
首先开头的那么多List,其实就是定义不同情况下要生成的模板标签,比如当传入的数据为空时,使用EmptyList中的模板生成,传入的数据是对象的时候,用TableList中的标签生成.等等.
其次,在render中的appropriateListComponent函数就是先通过 context.props拿到传入的数据,这个参数的具体作用可以看官网,这里不多赘述.放一个官网地址Vue官网,然后根据拿到的数据判断它的类型,这里跟官方示例一样,都是判断是否为空,是否为对象等,然后根据不同的类型返回不同的模板,也就是上面的各种List
接下来就可以返回创建节点了,createElement函数的第一个参数本来应该是要生成的标签名称,这里通过appropriateListComponent函数获得,第二个参数可以是对象(设置id,class,style等),也可以是一个数组,用于创建子节点.这里通过Array.apply(null)来达到这个目的,使用map来遍历items从而根据items 的值生成对应的项

结果截图