vue之函数式组件

在 Vue.js 中，functional: true 是用来定义函数式组件的一种方式。函数式组件是专门设计用于表现层的轻量级组件，通常没有状态和实例（即没有 data、methods、computed 等）。它们依赖于传入的 props 来渲染内容，因此效率更高。

主要特性

1. 无状态：函数式组件没有内部状态（即没有 data）。
2. 无生命周期钩子：函数式组件不支持生命周期钩子（如 created、mounted 等）。
3. 高性能：由于没有实例化的开销，函数式组件比普通组件的渲染速度更快。

创建函数式组件

可以通过在组件选项中设置 functional: true 来定义一个函数式组件。以下是具体示例：

使用 <template> 语法定义函数式组件

<template functional>
  <div>{{ props.message }}</div>
</template>

<script>
export default {
  functional: true,
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

使用 JavaScript 渲染函数定义函数式组件

export default {
  functional: true,
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  render(h, context) {
    return h('div', context.props.message);
  },
};

context 对象

在函数式组件中，你不能使用 this，而是要依赖于一个特殊的 context 对象，它包含了渲染时的上下文信息：

• props: 传入的属性。
• children: 子节点。
• slots: 插槽内容。
• data: VNode 数据。
• parent: 父组件实例。
• listeners: 事件监听器。
• scopedSlots: 作用域插槽。

示例：使用 context 对象

export default {
  functional: true,
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  render(h, context) {
    const { props, children } = context;
    return h('div', [
      h('h1', props.title),
      ...children
    ]);
  }
};

使用场景

函数式组件非常适合以下场景：

1. 纯展示组件：只需要根据输入的 props 显示内容，而不需要管理状态。
2. 列表项：长列表项的渲染可以显著提升性能。
3. 小型可复用组件：一些简单的、无需复杂逻辑的小组件。

优点与注意事项

优点

1. 性能优越：由于没有实例化开销，渲染速度更快。
2. 简洁明了：代码更简洁，没有冗余的生命周期方法和状态管理。
3. 易于测试：函数式组件由于其无状态特性，使得单元测试更加容易。

注意事项

1. 无法使用本地状态：因为函数式组件没有内部状态。
2. 缺少生命周期钩子：如果需要处理生命周期相关的操作，需要通过父组件来管理。

实际应用示例

假设我们要创建一个简单的按钮组件，该组件接收一个 label 属性并显示它：

使用 <template> 语法

<template functional>
  <button @click="context.listeners.click">{{ props.label }}</button>
</template>

<script>
export default {
  functional: true,
  props: {
    label: {
      type: String,
      required: true,
    },
  },
};
</script>

使用 JavaScript 渲染函数

export default {
  functional: true,
  props: {
    label: {
      type: String,
      required: true,
    },
  },
  render(h, context) {
    return h('button', {
      on: context.listeners
    }, context.props.label);
  },
};

函数式组件提供了一种高效、轻量的方法来创建 Vue 组件，特别是在性能要求较高或仅需简单渲染的场景中。如果你的组件不需要管理状态，不需要生命周期钩子，只是单纯地根据 props 渲染，那么考虑使用函数式组件将是一个不错的选择。