Vue3全局公共函数实现与最佳实践

1. 为什么需要全局公共函数？

在Vue3项目开发中，我们经常会遇到需要在多个组件中复用相同功能逻辑的情况。比如格式化日期、处理金额显示、校验手机号等工具函数。如果每个组件都单独引入这些函数，不仅会造成代码冗余，更会给后期维护带来困难。

全局公共函数的优势主要体现在三个方面：

• 一处定义，多处使用：避免重复代码，保持DRY原则
• 统一维护：修改时只需调整一处，所有使用的地方自动更新
• 提升开发效率：常用功能随取随用，无需反复导入

我在实际项目中就遇到过这样的案例：一个电商平台有超过30个组件需要使用相同的价格格式化函数。最初是在每个组件中单独实现，后来当需要调整价格显示规则时，不得不逐个修改，耗费了大量时间。采用全局公共函数方案后，这类问题就迎刃而解了。

2. Vue3中创建全局公共函数的三种方式

2.1 通过app.config.globalProperties挂载

这是Vue3官方推荐的方式，适合中小型项目使用。具体实现步骤如下：

javascript复制// utils/common.js
export const formatPrice = (price) => {
  return '¥' + Number(price).toFixed(2)
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as commonUtils from './utils/common'

const app = createApp(App)

// 挂载全局方法
app.config.globalProperties.$utils = commonUtils

app.mount('#app')

使用时的注意事项：

• 方法名前建议加$前缀，避免与组件属性冲突
• 在模板中直接通过$utils访问
• 在setup中需要通过getCurrentInstance获取

vue复制<template>
  <div>{{ $utils.formatPrice(99.9) }}</div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
console.log(proxy.$utils.formatPrice(99.9))
</script>

2.2 使用provide/inject实现

这种方式更适合大型项目或需要按需使用的场景：

javascript复制// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as commonUtils from './utils/common'

const app = createApp(App)

// 提供全局方法
app.provide('$utils', commonUtils)

app.mount('#app')

在组件中使用：

vue复制<script se