Vue函数实现

Vue 函数式组件实现

函数式组件在 Vue 中是一种无状态（无 data）和无实例（无 this 上下文）的组件形式，通常用于性能优化或简单渲染逻辑。

定义函数式组件

// 方式1：通过 functional 选项
export default {
  functional: true,
  render(h, context) {
    return h('div', context.props.text)
  }
}

使用 setup 函数（Vue 3）

import { h } from 'vue'

export default {
  setup(props) {
    return () => h('div', props.text)
  }
}

高阶函数封装

利用工厂函数生成可复用的逻辑：

function withLoading(WrappedComponent) {
  return {
    data() {
      return { isLoading: false }
    },
    methods: {
      showLoading() { this.isLoading = true },
      hideLoading() { this.isLoading = false }
    },
    render(h) {
      return h(WrappedComponent, {
        props: {
          ...this.$props,
          loading: this.isLoading
        }
      })
    }
  }
}

组合式函数（Vue 3）

使用 composables 实现逻辑复用：

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  return { count, increment }
}

// 组件中使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

渲染函数注意事项

• 使用 h() 函数创建虚拟节点
• 事件监听需通过 on 前缀指定，如 onClick
• 插槽内容通过 context.slots() 访问

render(h) {
  return h('button', {
    on: {
      click: this.handleClick
    }
  }, this.$slots.default)
}