在 Vue 3 中，全局过滤器的使用方式与 Vue 2 有所不同。Vue 3 推荐使用组合式 API 和自定义函数来实现类似的功能，而不是直接使用过滤器。不过，如果你仍然希望在 Vue 3 中实现全局过滤器，可以通过插件的方式实现。

以下是如何在 Vue 3 中创建和注册一个全局过滤器的示例：

1、创建一个全局过滤器

首先，你可以创建一个工具文件（例如 `filters.js`），在这个文件中定义你的过滤器。

javascript
// filters.js
export default {
install(app) {
app.config.globalProperties.$filters = {
// 全局过滤器示例：将字符串转换为大写
toUpperCase(value) {
if (!value) return '';
return value.toString().toUpperCase();
},
// 另一个示例：格式化日期
formatDate(date, format = 'YYYY-MM-DD') {
if (!date) return '';
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return format.replace('YYYY', year).replace('MM', month).replace('DD', day);
}
};
}
};

2、注册全局过滤器

在主文件（通常是 `main.js` 或 `main.ts`）中，通过 Vue 应用实例注册这个插件。

javascript
import { createApp } from 'vue';
import App from './App.vue';
import FiltersPlugin from './filters';

const app = createApp(App);

// 注册全局过滤器插件
app.use(FiltersPlugin);

app.mount('#app');

3、在模板中使用全局过滤器

现在你可以在组件的模板中使用这些过滤器了。例如：

vue
<template>
<div>
<p>{{ message | toUpperCase }}</p>
<p>{{ currentDate | formatDate }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'hello world',
currentDate: new Date()
};
}
};
</script>

注意事项

1、Vue 3 推荐的方式：Vue 3 官方文档推荐使用计算属性或方法来处理数据的格式化，而不是使用过滤器。例如：

vue
<template>
<div>
<p>{{ message.toUpperCase() }}</p>
<p>{{ formattedDate }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'hello world',
currentDate: new Date()
};
},
computed: {
formattedDate() {
const year = this.currentDate.getFullYear();
const month = String(this.currentDate.getMonth() + 1).padStart(2, '0');
const day = String(this.currentDate.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
}
};
</script>


这种方式更加直观，并且符合 Vue 3 的设计理念。

2、性能优化：如果你需要频繁使用某些格式化的逻辑，建议将其封装到方法或计算属性中，而不是依赖过滤器。

总结来说，虽然 Vue 3 支持全局过滤器，但官方更倾向于使用其他方式（如计算属性或方法）来实现类似的功能。