七、Vue普通知识点-函数式组件

1、条件：

1.没有管理任何状态，

2.也没有监听任何传递给它的状态，

3.也没有生命周期方法。

实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，

一个函数式组件就像这样：

Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

2、好处：functional:true , 更轻量

3、用法：

3.1、Vue.component(）使用：必须要有render函数，没有template属性了。

render函数中 多了一个context 属性,观察一下它的结构。

3.2、

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：

<template functional>
</template>

4、特点：

4.1.它无状态 (没有响应式数据)。

4.2也没有实例 (没有 this 上下文，使用context)。