函数式组件

使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小
利用函数式组件来进行组件包装，进而提升性能，初始化速度快。

无data，即可理解为无响应式数据。

另外：函数式组件也无生命周期钩子函数。

给template标签添加functional属性，视图无法渲染出传入的Props：

1
2
3
4
5
6
7
8
9
10
11
<template functional>
  <!-- content无法渲染 -->
  <p class="content">{{ content }}</p>
</template>
<script>
export default {
  props: {
    content: String
  }
};
</script>

为弥补缺少的this实例，使用render API进行渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
export default {
  functional: true,
  props: {
    content: String
  },
  render: (h, ctx) => {
    console.log("this", this);   // undefined
    console.log("ctx", ctx);
    return h("span", ctx.props.content);   // content成功渲染
  }
};
</script>

render的第一个参数h代表createElement 方法，用于创建虚拟DOM。

注意，接收的第二个参数：ctx，是为函数式组件额外提供的参数，是代表上下文信息的对象，提供了数据传递。

函数式组件就是一个函数，接受props的传参，接着利用render渲染，最后返回结果。
函数式组件不能视为一个组件（VueComponent），如下
某父组件既有普通组件（button）又有函数式组件，打印该父组件的 $refs 对象：无函数式组件信息

其渲染生成的是虚拟DOM，可当作一个HTMLElement，可通过$el访问。

函数式组件减少了组件实例化的过程，相对之下，不需要分配多余的内存，性能得到一定的提升。