vue3 Vue.prototype用什么替代

在 Vue 3 中，由于架构的变化，不再使用 Vue.prototype 来添加全局属性或方法。取而代之的是通过应用实例的 app.config.globalProperties 来实现类似功能。以下是具体解决方案：

1. 使用 app.config.globalProperties

这是最直接的替代方案，用于添加全局属性或方法，使其在所有组件中可用。

步骤：

1. 创建应用实例：使用 createApp 创建应用。

2. 设置全局属性：通过 app.config.globalProperties 添加属性或方法。

3. 挂载应用：调用 app.mount() 挂载到 DOM。

示例代码：

javascriptimport { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)// 添加全局方法
app.config.globalProperties.$formatDate = (date) => { 
     return new Date(date).toLocaleDateString()
}// 添加全局变量
app.config.globalProperties.$appName = 'My Vue 3 App'
app.mount('#app')

在组件中使用：

<script>
export default {
  mounted() {
    console.log(this.$appName) // 输出: My Vue 3 App
    console.log(this.$formatDate('2023-10-01')) // 输出格式化后的日期
  }
}
</script>

2. 使用 provide/inject（可选）

如果需要在特定组件树中共享数据，而不是全局共享，可以使用 provide 和 inject。

示例：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.provide('appName', 'My Vue 3 App') // 提供全局数据app.mount('#app')

在子组件中注入：

<script>
import { inject } from 'vue'

export default {
  setup() {
    const appName = inject('appName')
    return { appName }
  }
}
</script>

3. 组合式 API（推荐）

对于可复用的逻辑，建议封装成 组合式函数，而不是依赖全局属性。

示例：

// composables/useFormatDate.js
export function useFormatDate() {  
    const formatDate = (date) => {   
        return new Date(date).toLocaleDateString()  
     }  
     return { formatDate }
}

在组件中使用：

<script>
import { useFormatDate } from '@/composables/useFormatDate'

export default {
  setup() {
    const { formatDate } = useFormatDate()
    return { formatDate }
  }
}
</script>

4. TypeScript 支持（重要！）

如果你使用 TypeScript，需要扩展 ComponentCustomProperties 类型声明，以避免类型错误。

类型声明文件（如 src/shims-vue.d.ts）：

declare module '@vue/runtime-core' {  
interface ComponentCustomProperties {    
    $formatDate: (date: string) => string    $appName: string  }
}

总结

• 直接替代方案：使用 app.config.globalProperties 添加全局属性/方法。

• 类型安全：通过扩展 ComponentCustomProperties 支持 TypeScript。

• 更现代的方式：优先考虑组合式 API 或 provide/inject 实现逻辑复用。

这样既保持了 Vue 2 的相似用法，又符合 Vue 3 的最佳实践！