vue全局過濾器基本使用方法是什么

# Vue全局過濾器基本使用方法是什么

## 一、過濾器概述

### 1.1 什么是Vue過濾器
Vue過濾器（Filter）是Vue.js提供的一種功能，用于對常見文本格式進行轉換處理。它本質上是一個函數，接收表達式的值作為第一個參數，經過處理后返回新的值。

### 1.2 過濾器的應用場景
- 文本格式化（日期、貨幣、大小寫轉換等）
- 數據展示前的處理（截取字符串、數字精度控制）
- 多語言轉換
- 數據狀態的文字描述轉換

### 1.3 過濾器與計算屬性的區別
| 特性        | 過濾器               | 計算屬性             |
|-------------|---------------------|---------------------|
| 適用場景    | 簡單文本轉換        | 復雜數據邏輯        |
| 調用方式    | 模板中`|`語法調用   | 直接作為屬性使用    |
| 緩存機制    | 無                  | 有依賴緩存          |
| 參數支持    | 支持多參數          | 不接受參數          |

## 二、全局過濾器注冊方法

### 2.1 基本注冊語法
在Vue應用的入口文件（通常是main.js）中進行全局注冊：

```javascript
// main.js
import Vue from 'vue'

Vue.filter('filterName', function(value, ...args) {
  // 處理邏輯
  return processedValue
})

2.2 實際注冊示例

// 注冊一個貨幣格式化過濾器
Vue.filter('currency', function(value, symbol = '￥') {
  if (!value) return symbol + '0.00'
  return symbol + parseFloat(value).toFixed(2)
})

// 注冊日期格式化過濾器
Vue.filter('dateFormat', function(value, format = 'YYYY-MM-DD') {
  if (!value) return ''
  return dayjs(value).format(format)
})

三、過濾器的使用方式

3.1 在模板中的使用

<!-- 基本用法 -->
<p>{{ price | currency }}</p>

<!-- 帶參數用法 -->
<p>{{ orderDate | dateFormat('YYYY/MM/DD') }}</p>

<!-- 鏈式調用 -->
<p>{{ text | capitalize | truncate(20) }}</p>

3.2 在JavaScript中的使用

雖然不推薦，但可以通過this.$options.filters訪問：

methods: {
  formatPrice(value) {
    return this.$options.filters.currency(value, '$')
  }
}

四、常見過濾器實現示例

4.1 文本處理類

// 首字母大寫
Vue.filter('capitalize', function(value) {
  if (!value) return ''
  return value.charAt(0).toUpperCase() + value.slice(1)
})

// 文本截斷
Vue.filter('truncate', function(value, length = 30, suffix = '...') {
  if (!value) return ''
  return value.length > length 
    ? value.substring(0, length) + suffix 
    : value
})

4.2 數字處理類

// 數字千分位
Vue.filter('thousands', function(value) {
  if (isNaN(value)) return value
  return Number(value).toLocaleString()
})

// 百分比
Vue.filter('percentage', function(value, decimals = 2) {
  if (isNaN(value)) return value
  return (value * 100).toFixed(decimals) + '%'
})

4.3 日期時間處理

// 需要先安裝dayjs
import dayjs from 'dayjs'

Vue.filter('relativeTime', function(value) {
  return dayjs(value).fromNow()
})

Vue.filter('duration', function(seconds) {
  const hours = Math.floor(seconds / 3600)
  const mins = Math.floor((seconds % 3600) / 60)
  return `${hours}h ${mins}m`
})

五、高級使用技巧

5.1 過濾器組合

<!-- 先格式化日期，再轉為相對時間 -->
<p>{{ createTime | dateFormat | relativeTime }}</p>

5.2 動態過濾器名

<template>
  <p>{{ value | getFilter(filterName) }}</p>
</template>

<script>
export default {
  data() {
    return {
      filterName: 'currency'
    }
  },
  methods: {
    getFilter(value, filterName) {
      return this.$options.filters[filterName](value)
    }
  }
}
</script>

5.3 過濾器工廠函數

// 創建可配置的過濾器
function createPrefixFilter(prefix) {
  return function(value) {
    return prefix + value
  }
}

Vue.filter('prefix', createPrefixFilter('Hello '))

六、注意事項與最佳實踐

6.1 性能考慮

1. 避免在過濾器中執行復雜計算
2. 對于頻繁更新的數據，考慮使用計算屬性
3. 過濾器會在每次重新渲染時調用

6.2 可維護性建議

1. 為復雜過濾器編寫單元測試
2. 將過濾器分類到不同文件（如src/filters/date.js）
3. 為過濾器添加JSDoc注釋

/**
 * 貨幣格式化過濾器
 * @param {number} value - 要格式化的數值
 * @param {string} [symbol='￥'] - 貨幣符號
 * @returns {string} 格式化后的貨幣字符串
 */
Vue.filter('currency', function(value, symbol = '￥') {
  // ...
})

6.3 Vue 3兼容性說明

Vue 3中過濾器已被移除，建議： 1. 使用methods或computed替代 2. 對于已有項目，可通過全局屬性模擬：

app.config.globalProperties.$filters = {
  currency(value) { /*...*/ }
}
// 使用方式：{{ $filters.currency(price) }}

七、完整示例項目結構

src/
├── main.js           # 過濾器全局注冊
├── filters/
│   ├── index.js      # 過濾器聚合導出
│   ├── text.js       # 文本相關過濾器
│   ├── number.js     # 數字相關過濾器
│   └── date.js       # 日期相關過濾器
└── components/
    └── Product.vue   # 使用過濾器的組件

filters/index.js示例：

import * as text from './text'
import * as number from './number'
import * as date from './date'

export default {
  ...text,
  ...number,
  ...date
}

main.js注冊代碼：

import filters from '@/filters'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

結語

Vue全局過濾器為文本格式化提供了便捷的解決方案，雖然Vue 3中不再內置支持，但在Vue 2.x項目中仍是值得掌握的特性。合理使用過濾器可以： 1. 保持模板的簡潔性 2. 實現格式化邏輯的復用 3. 統一項目的顯示規范

建議根據項目實際需求，建立完善的過濾器體系，同時注意過渡到Vue 3時的兼容方案。 “`

注：本文實際約2200字，可根據需要適當增減示例或擴展某些章節內容以達到精確字數要求。