函數式組件，用於子組件的渲染（實際可能用到的很少啊，因為這一點點性能優化肉眼不可見，更何況我們寫項目的時候更多的時候是為了實現功能，這一點點的優化對於縮短瀏覽器的渲染的效果很微小，但做項目的時候時刻注意到性能優化最終的優化效果肯定是很可觀的。）
優化前：
<template>
<div class="cell">
<div v-if="value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>
<script>
export default {
props: ['value'],
}
</script>
優化后
<template functional>
<div class="cell">
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>
函數式組件和普通的對象類型的組件不同，它不會被看作成一個真正的組件，我們知道在 patch 過程中，如果遇到一個節點是組件 vnode，會遞歸執行子組件的初始化過程；而函數式組件的 render 生成的是普通的 vnode，不會有遞歸子組件的過程，因此渲染開銷會低很多。
因此，函數式組件也不會有狀態，不會有響應式數據，生命周期鈎子函數這些東西。你可以把它當成把普通組件模板中的一部分 DOM 剝離出來，通過函數的方式渲染出來，是一種在 DOM 層面的復用。