vue 组件提高渲染性能的一个小技巧

函数式组件，用于子组件的渲染（实际可能用到的很少啊，因为这一点点性能优化肉眼不可见，更何况我们写项目的时候更多的时候是为了实现功能，这一点点的优化对于缩短浏览器的渲染的效果很微小，但做项目的时候时刻注意到性能优化最终的优化效果肯定是很可观的。）

优化前：

<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 层面的复用。