app.config.globalProperties.$utils = utils

<think>好的，我现在需要帮用户解决在Vue 3中如何通过app.config.globalProperties添加全局工具函数的问题。用户可能正在使用Vue 3，想要在多个组件中共享一些工具方法，避免重复代码。我需要先理解提供的引用内容，特别是引用[2]和[3]提到的配置方法。 首先，根据引用[2]，Vue 3中用app.config.globalProperties替代了Vue 2的Vue.prototype。所以，用户需要创建一个应用实例，然后在这个实例的config.globalProperties上添加方法。例如，添加一个$utils对象，包含各种工具函数。 接下来，用户可能想知道如何在组件中使用这些全局方法。在选项式API中，可以直接通过this访问，但在组合式API中，可能需要使用getCurrentInstance来获取实例，然后访问proxy属性，如引用[4]提到的。这里需要注意，getCurrentInstance在开发环境下可用，生产环境下可能有不同表现，需要提醒用户注意。 还需要考虑如何组织工具函数，比如将它们放在单独的文件中，再导入到main.js里，保持代码整洁。另外，可能需要提到类型声明的问题，如果用户使用TypeScript，可能需要扩展ComponentCustomProperties类型，以便在模板中正确识别这些全局属性，但用户的问题中没有提到TS，可能暂时不需要深入，但可以简要提及。 用户可能遇到的问题包括方法未正确绑定，或者上下文问题，比如在工具函数中访问Vue实例的其他属性或插件。需要确保工具函数是独立的，或者正确绑定this，但根据示例，直接作为对象的方法应该没问题。 最后，按照用户的要求生成相关问题，需要围绕全局方法的其他用途、组合式API中的替代方案，以及注意事项来提问。确保问题相关且有引导性，帮助用户进一步学习。 总结步骤：创建应用实例，定义工具函数，挂载到globalProperties，在组件中使用，注意组合式API的获取方式，以及可能的类型扩展。同时，提醒用户注意事项，比如生产环境下的实例获取和代码组织。</think>在 Vue 3 中通过 `app.config.globalProperties` 设置全局工具函数，可通过以下步骤实现： ### 一、基础配置方法 1. **创建工具函数模块**（utils.js） ```javascript export default { formatDate: (timestamp) => new Date(timestamp).toLocaleString(), deepClone: (obj) => JSON.parse(JSON.stringify(obj)), validateEmail: (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) } ``` 2. **在入口文件挂载全局属性**（main.js） ```javascript import { createApp } from 'vue' import App from './App.vue' import utils from './utils' const app = createApp(App) app.config.globalProperties.$utils = utils // 关键配置步骤[^2] app.mount('#app') ``` ### 二、组件中使用方式 #### 选项式 API 组件 ```javascript export default { mounted() { console.log(this.$utils.formatDate(Date.now())) // 直接通过this访问[^3] } } ``` #### 组合式 API 组件 ```javascript import { getCurrentInstance } from 'vue' export default { setup() { const { proxy } = getCurrentInstance() // 获取当前实例[^4] const formatted = proxy.$utils.formatDate(Date.now()) return { formatted } } } ``` ### 三、最佳实践建议 1. **类型声明扩展**（TypeScript） ```typescript declare module '@vue/runtime-core' { interface ComponentCustomProperties { $utils: { formatDate: (timestamp: number) => string deepClone: <T>(obj: T) => T validateEmail: (email: string) => boolean } } } ``` 2. **性能优化** 建议将高频使用的工具函数通过 `computed` 缓存计算结果，避免重复执行 3. **安全注意事项** 避免在工具函数中直接操作 DOM，应保持纯函数特性