Vue中如何在一个全局过滤器内调用另一个全局过滤器？

我来给你几个实用的方案，既能避免重复代码，又能实现过滤器之间的顺畅调用：

方案1：抽离公共工具函数（推荐） #

最干净的做法是把重复的逻辑抽成独立的工具函数，让两个过滤器都依赖这个函数，而非过滤器之间互相依赖。这样代码解耦，后续维护也更方便：

// 先定义通用的日期格式化工具函数
const formatDateTimeUtil = (value) => {
  if (!value) return ''; // 处理空值，避免moment报错
  return moment(String(value)).format('DD-MMM-YY hh:mm');
};

// 注册全局过滤器，直接复用工具函数
Vue.filter('formatDateTime', formatDateTimeUtil);

Vue.filter('getActivity', (value) => {
  if (!value?.lastvisited) {
    return 'Not visited yet';
  }
  return `Last logged in ${formatDateTimeUtil(value.lastvisited)}`;
});

这个方案的优势：

• 逻辑单一，工具函数可以在任何地方复用（不仅限于过滤器）
• 过滤器之间无依赖关系，彻底避开全局Vue对象的访问问题
• 后续修改日期格式只需调整工具函数，不用同时改动两个过滤器

方案2：直接访问Vue构造函数的过滤器选项 #

如果你确实想让过滤器直接调用另一个全局过滤器，可以通过Vue.options.filters访问已注册的全局过滤器（注意是Vue.options，而非Vue.$options——后者是组件实例的选项，全局过滤器存放在构造函数的options里）：

Vue.filter('formatDateTime', value => {
  if (value) return moment(String(value)).format('DD-MMM-YY hh:mm');
});

Vue.filter('getActivity', value => {
  return !value.lastvisited 
    ? 'Not visited yet' 
    : `Last logged in ${Vue.options.filters.formatDateTime(value.lastvisited)}`;
});

这个方案更直接，但缺点是依赖Vue构造函数的内部结构，虽然在Vue 2中很稳定，但灵活性不如方案1。

小提示 #

不管用哪个方案，都建议给空值做兜底处理（比如!value时返回空字符串或默认值），避免moment处理空值时出现意外错误。

内容的提问来源于stack exchange，提问作者AntG