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>

以上。