Vue函数式组件个人理解

Vue官方文档的demo总是会省略很多东西，对于我们这样的小萌新十分不友好啊喂。函数式组件这块儿（链接https://cn.vuejs.org/v2/guide/render-function.html#函数式组件）这个demo啊，并没有实现什么实际的东西，还是需要自己去编写。我把它编辑好了，大家可以参考一下。

首先，html这块儿：

<div id="app">
    <smart-list :items=items></smart-list>
</div>

vue实例名为app，组件名为smart-list，这个组件可以根据我绑定的items来更改对应的不同内容，具体的见下面的js部分：

 //当父组件传过来的是空items时
    var EmptyList = {template: '<p>Empty list</p>'};
    //当父组件传来的items元素为对象类型时
    var TableList = 'ul'
    // 当父组件定义了isOrdered变量且为true
    var UnorderedList = 'ul'

    //定义组件
    Vue.component('smart-list', {
        //标记为函数式组件
        functional: true,

        //render函数
        render: function (createElement, context) {
            // console.log(context)//若不理解可以打印出来context来看看里面都有些什么东西

            //规定组件的渲染规则
            function appropriateListComp() {
                //获取父组件传来的数据
                var items = context.props.items;

                //若空，则返回前面定义的emptylist
                if (items.length === 0) return EmptyList;
                //若为对象
                if (typeof items[0] === 'object') return TableList;
                //其他
                return UnorderedList
            }

            //生成模板
            return createElement(
                //模板标记为渲染规则函数返回值
                appropriateListComp(),
                //模板子元素，返回一个数组
                Array.apply(null, {length: context.props.items.length}).map(function (value, index) {
                    return createElement('li',context.props.items[index].name)
                })
            )
        },
        props: {
            items: {
                type: Array,
                required: true
            },
            isOrdered: Boolean
        }
    });
    new Vue({
        el: '#app',
        data:{
            items:[
                {
                    name:'a',
                    id:0
                },
                {
                    name:'b',
                    id:1
                },
                {
                    name:'c',
                    id:2
                }
            ]
        }
    })

这里我们例子中的items数组中的元素为对象类型。

这里总共创建了3个模板子元素<li>

最终浏览器中的渲染结果：

<div id="app">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>

以上。