当前位置：首页 > VUE

vue功能组件实现

2026-01-19 14:57:52VUE

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)));
  }
}