函数式组件比较特殊，也非常的灵活，它可以根据传入该组件的内容动态的渲染成任意想要的节点，在一些比较复杂的高级组件里用到，比如Vue-router里的<router-view>组件就是一个函数式组件。
因为函数式组件只是函数，所以渲染开销也低很多,当需要做这些时，函数式组件非常有用:
程序化地在多个组件中选择一个来代为渲染。
在将children、props、data传递给子组件之前操作它们。
函数式组件的定义和普通组件类似，也是一个对象，不过而且为了区分普通的组件，定义函数式组件需要指定一个属性，名为functional，值为true，另外需要自定义一个render函数，该render函数可以带两个参数，分别如下:
createElement 等于全局的createElement函数，用于创建VNode
context 一个对象,组件需要的一切都是通过context参数传递
context对象可以包含如下属性:
parent ;父组件的引用 props ;提供所有prop的对象，经过验证了 children ;VNode 子节点的数组 slots ;一个函数，返回了包含所有插槽的对象 scopedSlots ;个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。 data ;传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件 listeners ;组件的自定义事件 injections ;如果使用了 inject 选项，则该对象包含了应当被注入的属性。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<smart-list :items=items></smart-list>
</div>
<script>
Vue.config.productionTip=false;
Vue.config.devtools=false;
Vue.component('smart-list', {
functional: true, //指定这是一个函数式组件
render: function (createElement, context) {
function appropriateListComponent (){
if (context.props.items.length==0){ //当父组件传来的items元素为空时渲染这个
return {template:"<div>Enpty item</div>"}
}
return 'ul'
}
return createElement(appropriateListComponent(),Array.apply(null,{length:context.props.items.length}).map(function(val,index){
return createElement('li',context.props.items[index].name)
}))
},
props: {
items: {type: Array,required: true},
isOrdered: Boolean
}
});
var app = new Vue({
el: '#app',
data:{
items:[{name:'a',id:0},{name:'b',id:1},{name:'c',id:2}]
}
})
</script>
</body>
</html> 以上就是Vue.javascript源码分析(三十)高级应用函数式组件详解。而不语是一种成长，痛而不言是一种历练。更多关于Vue.javascript源码分析(三十)高级应用函数式组件详解请关注haodaima.com其它相关文章！
