Vue函数式组件的应用

1. 渲染快
2. 没有实例，意味着没有（this）
3. 没有生命周期（没有响应式数据）

组件函数的使用

以局部组件为例，将组件标记为 functional=ture;

因为函数式没有实例，因此组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：

• props：提供所有 prop 的对象
• children: VNode 子节点的数组
• slots: 一个函数，返回了包含所有插槽的对象
• scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections: (2.3.0+) 如果使用了inject选项，则该对象包含了应当被注入的属性。

在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context参数，并将 this.$slots.default 更新为 context.children，然后将 this.level 更新为 context.props.level。

因为函数式组件只是函数，所以渲染开销也低很多。

在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：

• 程序化地在多个组件中选择一个来代为渲染；
• 在将 children、props、data 传递给子组件之前操作它们。

1     data() {
2         return {
3             changer:1
4         }
5     },

 1   components: {
 2         MyCmp:{
 3             functional:true,   //必要的设置
 4             render: function (createElement, context) {
 5                 function getcomp(cmp){
 6                     console.info(this); //输出为undefined，证明没有实例
 7                     if(cmp==1){
 8                         return comp1; 
 9                     }else{
10                         return comp2
11                     }
12                 }
13                 return createElement(getcomp(context.props.changer),
14                 {
15                     props:{
16                         cmpData:context.props.data //为子组件传递数据
17                     }
18                 }
19                 );
20             },

定义要渲染的组件

 1 var comp1={
 2     props:['cmpData'],
 3     render:function(createElement,context){
 4         return createElement('el-input',{
 5             props:{
 6                 type:this.cmpData
 7             }
 8         });
 9     },
10     mounted() {
11         console.log(this)  //这个组件为正常组件
12     },
13 }
14 var comp2={
15     props:['cmpData'],
16     render:function(createElement,context){
17         return createElement('el-button',{
18             props:{
19                 type:this.cmpData
20             }
21         });
22     },
23     mounted() {
24         console.log(this)  //正常组件
25     },
26 }

在父组件中使用

1 <template>
2     <div>
3         <el-input v-model="changer" placeholder="子组件"></el-input>
4        
5        
6         <my-cmp :changer="changer"></my-cmp>
7     </div>
8 </template>
9 <script>

理解渲染函数的参数

接下来说一下createElement 接受的参数：

第一个参数：可以是 {String | Object | Function}

不管是那种类型，最终返回到都是需要渲染的普通DOM标签，

第二个参数：是一个对象，这个参数是可选的，定义了需要渲染组件的参数，相对于普通HTML标签的属性是一样的。

还可以自定义指令的，Vue特有的东西，只是抽象一些，没有直接用Vue.directive()用起来直观。

第三个参数：子级虚拟节点，如果你这个节点只是单节点，没有嵌套节点，这个参数可以忽略。如果有的你就要使用一个数据数组的值位cerateElement()返回的虚拟节点。套路都是一样的。

 1 // @returns {VNode}
 2 createElement(
 3   // {String | Object | Function}
 4   // 一个 HTML 标签名、组件选项对象，或者
 5   // resolve 了上述任何一种的一个 async 函数。必填项。
 6   'div',
 7 
 8   // {Object}
 9   // 一个与模板中属性对应的数据对象。可选。
10   {
11     // 与 `v-bind:class` 的 API 相同，
12     // 接受一个字符串、对象或字符串和对象组成的数组
13     'class': {
14         foo: true,
15         bar: false
16     },
17     // 与 `v-bind:style` 的 API 相同，
18     // 接受一个字符串、对象，或对象组成的数组
19     style: {
20         color: 'red',
21         fontSize: '14px'
22     },
23     // 普通的 HTML 特性
24     attrs: {
25         id: 'foo'
26     },
27     // 组件 prop
28     props: {
29         myProp: 'bar'
30     },
31     // DOM 属性
32     domProps: {
33         innerHTML: 'baz'
34     },
35     // 事件监听器在 `on` 属性内，
36     // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
37     // 需要在处理函数中手动检查 keyCode。
38     on: {
39         click: this.clickHandler
40     },
41     // 仅用于组件，用于监听原生事件，而不是组件内部使用
42     // `vm.$emit` 触发的事件。
43     nativeOn: {
44         click: this.nativeClickHandler
45   },
46   // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
47   // 赋值，因为 Vue 已经自动为你进行了同步。
48   directives: [
49     {
50       name: 'my-custom-directive',
51       value: '2',
52       expression: '1 + 1',
53       arg: 'foo',
54       modifiers: {
55         bar: true
56       }
57     }
58   ],
59   // 作用域插槽的格式为
60   // { name: props => VNode | Array<VNode> }
61   scopedSlots: {
62     default: props => createElement('span', props.text)
63   },
64   // 如果组件是其它组件的子组件，需为插槽指定名称
65   slot: 'name-of-slot',
66   // 其它特殊顶层属性
67   key: 'myKey',
68   ref: 'myRef',
69   // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
70   // 那么 `$refs.myRef` 会变成一个数组。
71   refInFor: true    
72   },
73 
74   // {String | Array}
75   // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
76   // 也可以使用字符串来生成“文本虚拟节点”。可选。
77   [
78     '先写一些文字',
79     createElement('h1', '一则头条'),
80     createElement(MyComponent, {
81       props: {
82         someProp: 'foobar'
83       }
84     })
85   ]
86 )