Vue函数式组件

  Vue 提供了一种称为函数式组件的组件类型，用来定义那些没有响应数据，
  也不需要有任何生命周期的场景，它只接受一些props 来显示组件。

• 与正常组件的区别：
  • 不维护响应数据
  • 无钩子函数
  • 没有instance实例，所以在组件内部没有办法像传统组件一样通过this来访问组件属性
• 特点
  • 无状态
  • 无法实例化
  • 内部没有任何生命周期处理函数
  • 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)
  • 在template标签里标明functional
  • 只接受props值
  • 不需要script标签
• 适用场景
  • 函数式组件精简了很多例如响应式和钩子函数的处理，因此渲染性能会有一定的提高，所以如果你的业务组件是一个纯展示且不需要有响应式数据状态的处理的，那函数式组件会是一个非常好的选择。

案例

父组件

<template> 
 <div> 
      <List :items="['Wonderwoman', 'Ironman']" :item-click="item => (clicked = item)" />
      <p>Clicked hero: {{ clicked }}</p> 
</div> 
</template> 
<script>
import List from './List' 
export default { 
    name: "App", 
    data: () => ({ clicked: "" }), 
    components: { List } 
}; 
</script>

子组件

<template functional> 
<div> 
    <p v-for="(item,index) in props.items" :key="index" @click="props.itemClick(item)" />
</div> 
</template>