vue函數式組件

參照 https://blog.csdn.net/weixin_41275295/article/details/100189869

vue 提供了一種稱為函數式組件的組件類型，用來定義那些沒有響應數據，也不需要有任何生命周期的場景，它只接受一些props 來顯示組件。

1.使用方法

Vue.component('my-component', {
  functional: true,
  // Props 是可選的
  props: {
    // ...
  },
  // 為了彌補缺少的實例
  // 提供第二個參數作為上下文
  render: function (createElement, context) {
    // ...
  }
})

或者單文件定義函數式組件（2.5版本后）

<template functional>
  <button
    class="btn btn-primary"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

2.參數

1.functional
設置為true 即表示該組件為一個函數組件
2.props（可選）
傳遞值到組件內部，2.3.0版本后可以省略，框架會自動將組件上的特性解析為prop
3.render函數
提供渲染函數來返回一個vnode

3.和正常自定義組件的區別？

1.不維護響應數據
2.無鈎子函數
3.沒有instance實例
4.所以在組件內部沒有辦法像傳統組件一樣通過this來訪問組件屬性
5.正是因為函數式組件精簡了很多例如響應式和鈎子函數的處理，因此渲染性能會有一定的提高，所以如果你的業務組件是一個純展示且不需要有響應式數據狀態的處理的，那函數式組件會是一個非常好的選擇。

4.render函數

1.render函數是函數式組件最重要的參數，且是必須的。
2.render函數有兩個參數，一個是createElement，一個是context
createElement 是創建虛擬dom的函數
context 是函數式組件的上下文，它包括：
    props：提供所有 prop 的對象
    children: VNode 子節點的數組
    slots: 一個函數，返回了包含所有插槽的對象
    scopedSlots: (2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數形式暴露普通插槽。
    data：傳遞給組件的整個數據對象，作為 createElement 的第二個參數傳入組件
    parent：對父組件的引用
    listeners: (2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監聽器的對象。這是 data.on 的一個別名。
    injections: (2.3.0+) 如果使用了 inject 選項，則該對象包含了應當被注入的屬性。

由於函數式組件沒有創建組件實例，所有傳統的通過this來調用的屬性，在這里都需要通過context來調用
Vue.component('my-functional-button', {
  functional: true,
  render: function (createElement, context) {
    return createElement('button', context.data, context.children)
  }
})

5.context中的 slots(）和children

slots 返回的是map化的非作用域插槽，key是slot的名字，value是slot的內容，所有我們可以通過slots().default 來調用指定的插槽。
children 是一個數組，包含了所有的非作用域插槽。所以我們可以很簡單的把所有插槽傳遞給下一個函數進行處理。

6.context中的scopedSlots使用演示

<func-comp>
   <div slot-scope="scope">demo functional component {{scope.a}}</div>
</func-comp>

Vue.component('func-comp', {
    functional: true,
    props: {
      name: String
    },
    render (createElement, context) {
      return createElement('div', context.data, [context.scopedSlots.default({
         a:1
      })])
    }
})

顯示結果：demo functional component 1