vue功能组件实现

Vue 功能组件实现

定义组件

功能组件通常是无状态（stateless）且无实例（no-instance）的组件，仅通过 props 接收数据并渲染内容。使用 functional: true 标记组件为功能组件。

export default {
  functional: true,
  props: ['message'],
  render(h, { props }) {
    return h('div', props.message);
  }
}

使用插槽

功能组件可以通过 slots() 访问插槽内容，动态渲染子元素。

export default {
  functional: true,
  render(h, { slots }) {
    return h('div', slots().default);
  }
}

上下文参数

render 函数的第二个参数是上下文对象，包含以下属性：

• props：组件接收的 props
• children：子节点（等同于 slots().default）
• data：传递给组件的整个数据对象
• parent：父组件实例

export default {
  functional: true,
  render(h, { props, children }) {
    return h('button', { on: { click: props.onClick } }, children);
  }
}

高阶函数组件

通过工厂函数生成功能组件，实现逻辑复用。

function createFunctionalComponent(options) {
  return {
    functional: true,
    ...options
  };
}

const MyComponent = createFunctionalComponent({
  props: ['count'],
  render(h, { props }) {
    return h('span', `Count: ${props.count}`);
  }
});

性能优化

功能组件没有实例化过程，适合渲染大量静态内容或列表项。通过避免响应式数据绑定和生命周期钩子，减少性能开销。

export default {
  functional: true,
  props: ['items'],
  render(h, { props }) {
    return h('ul', props.items.map(item => h('li', item.text)));
  }
}

与普通组件对比

普通组件通过 this 访问实例属性和方法，而功能组件通过上下文参数传递数据。功能组件更适合纯展示型逻辑，普通组件适合需要状态管理的场景。