vue 函数化组件

Vue.js提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。

使用函数化组件时，Render函数提供了第二个参数context来提供临时上下文。组件需要的data、props、slots、children、parent都是通过这个上下文来传递的，比如this.level要改写为context.props.level, this.$slots.default改写为context.children。

例如，下面的示例用函数化组件展示了一个根据数据智能选择不同组件的场景：

        <div id="app"><smart-item :data="data"></smart-item><button @click="change('img')">切换为图片组件</button><button @click="change('video')">切换为视频组件</button><button @click="change('text')">切换为文本组件</button></div><script>// 图片组件选项var ImgItem = {props: ['data'],render: function (createElement) {return createElement('div', [createElement('p', ’图片组件’),createElement('img', {attrs: {src: this.data.url}})]);}};// 视频组件选项var VideoItem = {props: ['data'],render: function (createElement) {return createElement('div', [createElement('p', ’视频组件’),createElement('video', {attrs: {src: this.data.url,controls: 'controls',autoplay: 'autoplay'}})]);}};// 纯文本组件选项var TextItem = {props: ['data'],render: function (createElement) {return createElement('div', [createElement('p', ’纯文本组件’),createElement('p', this.data.text)]);}};Vue.component('smart-item', {//函数化组件functional: true,render: function (createElement, context) {// 根据传入的数据，智能判断显示哪种组件function getComponent () {var data = context.props.data;// 判断prop: data的type字段是属于哪种类型的组件if (data.type === 'img')   return ImgItem;if (data.type === 'video') return VideoItem;return TextItem;}return createElement(getComponent(),{props: {//把smart-item的prop: data传给上面智能选择的组件data: context.props.data}},context.children)},props: {data: {type: Object,required: true}}})var app = new Vue({el: '#app',data: {data: {}},methods: {// 切换不同类型组件的数据change: function (type) {if (type === 'img') {this.data = {type: 'img',url: 'https://raw.githubusercontent.com/iview/iview/master/assets/logo.png'}} else if (type === 'video') {this.data = {type: 'video',url: 'http://vjs.zencdn.net/v/oceans.mp4">http://vjs.zencdn.net/v/oceans.mp4'}} else if (type === 'text') {this.data = {type: 'text',content: ’这是一段纯文本’}}}},created: function () {// 初始化时，默认设置图片组件的数据this.change('img');}})</script>

代码片段比较长，逐步分析一下实现的内容。ImgItem、VideoItem、TextItem这3个对象分别是图片组件、视频组件和纯文本组件的选项，它们都接收一个prop:data。在函数化组件smart-item里，也有props:data，通过getComponent函数来判断其字段type的值，选择这条数据适合渲染的组件。通过createElement把getComponent()返回的对象设置为第一个参数，然后通过第二个参数把smart-item的data传递到选择的组件里的prop:data，组件渲染出不同的内容。