Vue 中的高阶函数：提升代码复用与组件抽象的利器

高阶函数(Higher-Order Functions)是函数式编程中的核心概念，在 Vue 开发中同样大有用武之地。本文将深入探讨 Vue 中高阶函数的应用场景、实现方式以及最佳实践。

一、什么是高阶函数？

高阶函数是指满足以下任一条件的函数：

1. 接收一个或多个函数作为参数
2. 返回一个新的函数

在 Vue 上下文中，高阶函数可以帮助我们：

• 抽象通用逻辑
• 增强组件功能
• 实现更灵活的代码复用

二、Vue 2 中的高阶函数应用

1. 高阶组件(HOC)模式

// withLoading.js
export default function withLoading(WrappedComponent) {
  return {
    data() {
      return {
        isLoading: false
      }
    },
    methods: {
      startLoading() {
        this.isLoading = true
      },
      stopLoading() {
        this.isLoading = false
      }
    },
    render(h) {
      return h(WrappedComponent, {
        props: {
          ...this.$props,
          isLoading: this.isLoading
        },
        on: {
          ...this.$listeners,
          'start-loading': this.startLoading,
          'stop-loading': this.stopLoading
        }
      })
    }
  }
}

// 使用方式
import withLoading from './withLoading'
import MyComponent from './MyComponent'

export default withLoading(MyComponent)

2. 指令高阶函数

// directiveFactory.js
export function createResizeDirective(callback) {
  return {
    bind(el, binding) {
      const handler = () => {
        callback(el, binding)
      }
      el.__resizeHandler__ = handler
      window.addEventListener('resize', handler)
    },
    unbind(el) {
      window.removeEventListener('resize', el.__resizeHandler__)
    }
  }
}

// 使用方式
import { createResizeDirective } from './directiveFactory'

Vue.directive('custom-resize', createResizeDirective((el, binding) => {
  console.log('元素尺寸变化:', el.offsetWidth)
}))

三、Vue 3 组合式 API 中的高阶函数

1. 组合函数工厂

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

export function createFetch(options = {}) {
  const { baseUrl = '', defaultHeaders = {} } = options
  
  return function useFetch(resource) {
    const data = ref(null)
    const error = ref(null)
    const loading = ref(false)
    
    const fetchData = async (params = {}) => {
      loading.value = true
      try {
        const url = `${baseUrl}${resource}`
        const response = await fetch(url, {
          headers: { ...defaultHeaders },
          ...params
        })
        data.value = await response.json()
      } catch (err) {
        error.value = err
      } finally {
        loading.value = false
      }
    }
    
    return { data, error, loading, fetchData }
  }
}

// 使用方式
import { createFetch } from './useFetchFactory'

const useUserFetch = createFetch({
  baseUrl: 'https://api.example.com',
  defaultHeaders: { 'Authorization': 'Bearer token' }
})

export default {
  setup() {
    const { data, fetchData } = useUserFetch('/users')
    
    return { users: data, loadUsers: fetchData }
  }
}

2. 高阶组合函数

// withLogging.js
export function withLogging(composable) {
  return function useComposableWithLogging(...args) {
    const result = composable(...args)
    
    // 添加日志功能
    for (const key in result) {
      if (typeof result[key] === 'function') {
        const original = result[key]
        result[key] = async (...args) => {
          console.log(`调用 ${key}`, args)
          try {
            const res = await original(...args)
            console.log(`调用 ${key} 成功`, res)
            return res
          } catch (err) {
            console.error(`调用 ${key} 失败`, err)
            throw err
          }
        }
      }
    }
    
    return result
  }
}

// 使用方式
import { useFetch } from './useFetch'
import { withLogging } from './withLogging'

const useFetchWithLogging = withLogging(useFetch)

export default {
  setup() {
    const { fetchData } = useFetchWithLogging('/api/data')
    // 所有调用都会自动记录日志
  }
}

四、高阶函数在 Vuex/Pinia 中的应用

1. Vuex 高阶 Action

// createAsyncAction.js
export function createAsyncAction(action) {
  return async function wrappedAction({ commit }, payload) {
    commit('START_LOADING')
    try {
      const result = await action(payload)
      commit('SET_RESULT', result)
      return result
    } catch (error) {
      commit('SET_ERROR', error)
      throw error
    } finally {
      commit('STOP_LOADING')
    }
  }
}

// store.js
import { createAsyncAction } from './createAsyncAction'

const actions = {
  fetchUser: createAsyncAction(async (userId) => {
    const response = await fetch(`/users/${userId}`)
    return response.json()
  })
}

2. Pinia 高阶 Store

// createAuthStore.js
export function createAuthStore(id, options = {}) {
  return defineStore(id, {
    state: () => ({
      user: null,
      token: null,
      ...options.initialState
    }),
    actions: {
      async login(credentials) {
        const response = await api.login(credentials)
        this.user = response.user
        this.token = response.token
        options.onLogin?.(this.user)
      },
      ...options.customActions
    }
  })
}

// 使用方式
import { createAuthStore } from './createAuthStore'

export const useAdminAuth = createAuthStore('adminAuth', {
  initialState: { role: 'admin' },
  onLogin: (user) => trackLogin(user)
})

五、高阶函数的最佳实践

1. 命名约定

• 高阶组件：with[Feature] (如 withLoading)
• 高阶函数：create[Functionality] (如 createFetch)
• 装饰器函数：decorate[Behavior] (如 decorateWithLogging)

2. 类型安全(TypeScript)

// 高阶组件类型定义
import { Component, ComponentPublicInstance } from 'vue'

type WithLoadingProps = {
  isLoading: boolean
}

export function withLoading<T extends Component>(
  WrappedComponent: T
): Component & { new (): ComponentPublicInstance<WithLoadingProps> } {
  // 实现...
}

3. 性能优化

// 记忆化高阶函数
function memoize(fn) {
  const cache = new Map()
  return function memoized(...args) {
    const key = JSON.stringify(args)
    if (cache.has(key)) return cache.get(key)
    
    const result = fn(...args)
    cache.set(key, result)
    return result
  }
}

const memoizedFetch = memoize(fetch)

六、实际应用场景

1. 权限控制高阶组件

// withAuthorization.js
export default function withAuthorization(requiredRole) {
  return function wrapComponent(WrappedComponent) {
    return {
      computed: {
        hasAccess() {
          return this.$store.getters.userRoles.includes(requiredRole)
        }
      },
      render(h) {
        return this.hasAccess 
          ? h(WrappedComponent, { ...this.$attrs, ...this.$props })
          : h('div', '无权限访问')
      }
    }
  }
}

2. 表单验证高阶函数

// createFormValidator.js
export function createFormValidator(rules) {
  return function validate(formData) {
    const errors = {}
    
    Object.entries(rules).forEach(([field, fieldRules]) => {
      fieldRules.forEach(rule => {
        if (!rule.validator(formData[field])) {
          errors[field] = errors[field] || []
          errors[field].push(rule.message)
        }
      })
    })
    
    return {
      isValid: Object.keys(errors).length === 0,
      errors
    }
  }
}

// 使用示例
const validateLogin = createFormValidator({
  username: [
    { validator: val => val.length >= 3, message: '至少3个字符' }
  ],
  password: [
    { validator: val => val.length >= 8, message: '至少8个字符' }
  ]
})

七、注意事项

1. 避免过度抽象：只在确实存在重复模式时使用高阶函数
2. 调试难度：高阶函数会增加调用栈深度，适当添加调试信息
3. 性能影响：注意闭包和内存使用，避免不必要的函数创建
4. 可读性平衡：确保代码对团队成员保持可读性

八、总结

Vue 中的高阶函数提供了强大的抽象能力，能够显著提升代码的复用性和可维护性。无论是 Vue 2 的选项式 API 还是 Vue 3 的组合式 API，高阶函数都能找到其用武之地。合理运用高阶函数模式，可以帮助我们：

• 减少重复代码
• 统一处理横切关注点(如日志、权限)
• 创建更具表达力的 API
• 构建可扩展的架构

掌握高阶函数技巧，将使你的 Vue 开发水平更上一层楼，写出更加优雅和高效的代码。