Vue的过滤器（filters）

在 Vue 中，过滤器（filters）是一种特殊的函数，主要用于对文本数据进行格式化处理，比如转换大小写、日期格式化、货币格式化等。

1. 局部过滤器

你可以在组件内部定义过滤器，这样它就只在当前组件中有效。

export default {
  data() {
    return {
      price: 99.9
    }
  },
  // 定义局部过滤器
  filters: {
    currency(value) {
      if (typeof value !== 'number') {
        return value;
      }
      return '¥' + value.toFixed(2);
    }
  }
}

在模板中使用过滤器：

<template>
  <div>
    <!-- 输出：¥99.90 -->
    <p>{{ price | currency }}</p>
  </div>
</template>

2. 全局过滤器

若要让过滤器在所有组件中都能使用，可将其定义为全局过滤器。通常在创建 Vue 实例之前定义全局过滤器。

import Vue from 'vue';

// 定义全局过滤器
Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toString().toUpperCase();
});

// 创建 Vue 实例
new Vue({
  // ...
});

在任意组件的模板中使用全局过滤器：

<template>
  <div>
    <!-- 输出：HELLO WORLD -->
    <p>{{ message | uppercase }}</p>
  </div>
</template>

3. 过滤器串联

Vue 过滤器支持串联使用，也就是一个值可以依次通过多个过滤器进行处理。

过滤器串联的顺序是从左到右依次执行的，因此写入模板的先后顺序会直接影响最终结果。

filters: {
  currency(value) {
    return '¥' + value.toFixed(2);
  },
  discount(value, rate) {
    return value * (rate || 1);
  }
}

在模板中串联使用过滤器：

<template>
  <div>
    <!-- 输出：¥79.92 -->
    <p>{{ 99.9 | discount(0.8) | currency }}</p>
  </div>
</template>

4. 过滤器传参

过滤器可以接收额外的参数，从而实现更灵活的格式化。

import dayjs from 'dayjs';
……
filters: {
  formatDate(value, format = 'YYYY-MM-DD') {
    // 这里可以使用日期库如 day.js 进行格式化
    return dayjs(value).format(format)
  }
}

在模板中传递参数给过滤器：

<template>
  <div>
    <!-- 输出：2023/10/15 -->
    <p>{{ date | formatDate('YYYY/MM/DD') }}</p>
  </div>
</template>

5. Vue 3 中的变化

在 Vue 3 里，过滤器已被移除，官方推荐使用计算属性（computed）或者方法（methods）来替代过滤器的功能。

export default {
  data() {
    return {
      price: 99.9
    }
  },
  computed: {
    formattedPrice() {
      return '¥' + this.price.toFixed(2);
    }
  }
}

在模板中使用计算属性替代过滤器：

<template>
  <div>
    <!-- 输出：¥99.90 -->
    <p>{{ formattedPrice }}</p>
  </div>
</template>

Vue 3 移除过滤器（filters）主要基于以下几个原因：

1） 语法一致性与冗余性

• 过滤器本质上是一种特殊的语法糖，其功能可以被计算属性（computed）或方法（methods）完全替代。

• 移除过滤器减少了学习成本和语法复杂度，保持了 "一个功能只对应一种实现方式" 的设计原则。

2）组合式 API 的兴起

• Vue 3 主推的组合式 API（Composition API）更强调逻辑复用和代码组织，过滤器在这种范式下显得格格不入。
• 过滤器只能在模板中使用，而计算属性和方法可以在 setup () 函数中定义，更好地与组合式 API 集成。

3）类型推导与 IDE 支持

• 过滤器的类型推导较为困难，尤其是在 TypeScript 环境下。
• 计算属性和方法作为普通 JavaScript 函数，更容易被类型系统和 IDE 正确识别。

4）性能优化

• 过滤器的实现需要额外的运行时开销，移除后可以简化编译过程和渲染逻辑。