Vue函数式组件的应用

1|0函数组件和普通组件区别

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

2|0组件函数的使用

2|1以局部组件为例，将组件标记为 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     },