setup 模式下全局属性处理优化

本文深入解析了 Vue 3 Composition API（setup 模式）中无法使用 `$filters` 的根本原因——它属于已被弃用的 Vue 2 Options API 实例属性，而 Vue 3 已彻底移除全局过滤器机制；文章不仅厘清了技术原理（如 setup 的函数式上下文与 this 解耦），更提供了清晰落地的现代化替代方案：将过滤逻辑重构为纯函数、模块化导出，并在 setup 中直接导入或通过 computed/组合式函数优雅复用；同时明确指出手动挂载到 globalProperties 等兼容做法虽可行但违背设计哲学，强调“工具函数化、显式化、可测试”才是构建高维护性 Vue 3 应用的关键路径——读完你将彻底告别过时写法，拥抱更健壮、更可持续的开发实践。

在 Vue 3 的 setup 模式中，$filters 确实不可用 —— 它是 Vue 2 的实例属性，Vue 3 已移除。全局过滤器（global filters）本身也被官方弃用，取而代之的是更显式、更易维护的函数式方案。

为什么 setup 中访问不到 $filters？

Vue 3 的 Composition API 基于函数上下文，不依赖 this 绑定，所有响应式逻辑、生命周期、依赖注入都通过显式 API（如 ref、computed、inject）获取。$filters 属于 Vue 2 的 Options API 实例代理属性，未被映射到 setup 上下文，也未纳入新的全局应用配置体系。

替代方案：用普通函数 + 模块导出（推荐）

将原过滤器逻辑封装为纯函数，统一管理在 src/utils/filters.js 或类似路径：

• 定义函数：
  export const formatDate = (date, format = 'YYYY-MM-DD') => { /* 使用 dayjs / date-fns 处理 */ };
export const capitalize = (str) => str?.charAt(0)?.toUpperCase() + str?.slice(1) || '';
• 在 setup 中直接导入使用：
  import { formatDate, capitalize } from '@/utils/filters';
export default { setup() { const formatted = formatDate(new Date()); return { formatted }; } };

若需“类过滤器”调用风格，可用 computed 封装

在模板中希望保持简洁写法（如 {{ post.time | formatDate }}），可借助 computed 在 setup 内部桥接：

• 接收原始值，返回处理后结果：
  const displayTime = computed(() => formatDate(post.time.value));
• 或封装成可复用的组合函数：
  function useFormattedDate(source) { return computed(() => formatDate(source.value)); }
const displayTime = useFormattedDate(post.time);

兼容旧项目？可手动挂载到 app.config.globalProperties（不推荐）

仅作过渡，不建议长期使用：

• 在 main.js 中注册：
  app.config.globalProperties.$filters = { formatDate, capitalize };
• 但在 setup 中仍无法直接访问 —— 需通过 getCurrentInstance() 获取 proxy（不稳定且破坏 Composition API 设计原则）：
  const instance = getCurrentInstance(); const filters = instance?.proxy?.$filters;
• 该方式耦合性强、TypeScript 支持差、调试困难，新项目请绕行。

本质上，Vue 3 鼓励你把“过滤逻辑”当作业务工具函数来组织，而非框架级特性。清晰、可测试、可复用，才是长期可维护的关键。

今天关于《setup 模式下全局属性处理优化》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！