vue过滤器

一、Vue过滤器的核心概念（ES6新增，解决传统字符串痛点）

Vue过滤器（Filters）是一种格式化数据显示的功能，用于在模板渲染时对数据进行转换，不改变原始数据。它本质是一个函数，接收数据作为参数，返回格式化后的结果。

二、过滤器的两种使用方式（高频考点，需结合代码）

1. 局部过滤器（组件内定义）

export default {
  data() {
    return {
      price: 1000
    }
  },
  filters: {
    currency(value) {
      return '¥' + value.toFixed(2);
    }
  }
}

2. 全局过滤器（应用级别）

// main.js中定义
import Vue from 'vue';

Vue.filter('uppercase', function(value) {
  return value.toUpperCase();
});

3. 模板中使用

<!-- 单个过滤器 -->
<p>{{ price | currency }}</p> <!-- 输出: ¥1000.00 -->

<!-- 链式调用 -->
<p>{{ message | uppercase | truncate(10) }}</p> <!-- 先转大写，再截断 -->

三、Vue3对过滤器的调整（展示技术跟进能力）

Vue3中过滤器已被废弃，推荐使用以下替代方案：

1. 计算属性（Computed）

   import { computed } from 'vue';
   
   export default {
     setup() {
       const price = ref(1000);
       const formattedPrice = computed(() => '¥' + price.value.toFixed(2));
       return { formattedPrice };
     }
   }
   

2. 方法调用（Methods）

   export default {
     methods: {
       formatCurrency(value) {
         return '¥' + value.toFixed(2);
       }
     }
   }
   

四、应用场景（结合项目经验）

1. 格式化文本

   <!-- 日期格式化 -->
   <p>{{ createTime | formatDate('YYYY-MM-DD') }}</p>
   
   <!-- 手机号脱敏 -->
   <p>{{ phone | maskPhone }}</p> <!-- 输出: 138****1234 -->
   

2. 数据转换

   <!-- 状态码转中文 -->
   <p>{{ status | statusText }}</p> <!-- 0→待支付，1→已支付 -->
   

3. 安全处理

   <!-- HTML转义 -->
   <p>{{ htmlContent | safe }}</p> <!-- 将<script>转为&lt;script&gt; -->
   

五、过滤器的优缺点（面试必答）

1. 优点

• 模板简洁：避免在模板中编写复杂的格式化逻辑；
• 复用性高：一个过滤器可在多个组件中使用；
• 关注点分离：将显示逻辑与业务逻辑解耦。

2. 缺点

• 仅支持同步操作：无法处理异步请求；
• Vue3中已废弃：维护老项目时需注意兼容性；
• 功能有限：复杂逻辑需依赖计算属性或方法。

六、实际项目中的最佳实践（加分项）

1. 封装工具库

   // utils/filters.js
   export function formatDate(date, pattern) {
     // 日期格式化逻辑
   }
   
   export function maskPhone(phone) {
     // 手机号脱敏逻辑
   }
   
   // 组件中引入使用
   import { maskPhone } from '@/utils/filters';
   
   <p>{{ phone | maskPhone }}</p>
   

2. 替代Vue3过滤器

   // 使用组合式API封装过滤器逻辑
   import { ref, computed } from 'vue';
   
   export function useFormatters() {
     const formatCurrency = (value) => '¥' + value.toFixed(2);
     return { formatCurrency };
   }
   

七、总结

“Vue过滤器是Vue2中用于格式化数据显示的功能，通过管道符号（|）在模板中调用。

• 优点是模板简洁、复用性高；
• 缺点是仅支持同步、Vue3已废弃；
• 现代Vue项目推荐使用计算属性或工具函数替代。

在实际项目中，我会将常用的格式化逻辑封装到独立的工具库中，既保持代码复用，又能平滑过渡到Vue3。”