快捷導(dǎo)航

vue3刪除過濾器的原因

更新時間：2021年05月13日 11:45:17 作者：水冗水孚

去年，vue3出來了。增加了很多新功能，但是也刪掉了一些功能。比如刪掉了vue2中的過濾器filter功能。與此同時，官方建議：用方法調(diào)用或計算屬性替換過濾器。本文將分析vue3刪除過濾器的原因及如何用其他方法實現(xiàn)過濾器的功能

什么是vue的過濾器

過濾器可以通俗理解成是一個特殊的方法，用來加工數(shù)據(jù)的

比如枚舉值可以使用過濾器：如 1 2 3 4 對應(yīng) 成功失敗進(jìn)行中已退回
比如價格后面跟個過濾器，將價格格式化成小數(shù)點兩位
比如時間格式化等

詳細(xì)請看官方文檔

why？

筆者認(rèn)為：原因就是vue3要精簡代碼，并且filter功能重復(fù)，filter能實現(xiàn)的功能，methods和計算屬性基本上也可以實現(xiàn)。所以就干脆把filter這方面的vue源碼給刪掉，這樣的話，更加方便維護(hù)。

舉例分析

需求描述

假設(shè)我們有一個快遞信息，后端返回給我們的并不是具體的狀態(tài)值，而是對應(yīng)的字符串1 2 3 4 5 6等，不同的狀態(tài)有著一套對應(yīng)

規(guī)則，比如狀態(tài)為1是待發(fā)貨等，具體效果圖和狀態(tài)對應(yīng)關(guān)系如下圖：

HTML結(jié)構(gòu)和data數(shù)據(jù)如下

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快遞公司:{{ item.deliverCompany }}</li>
      <li>運輸狀態(tài):{{ item.expressState }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          deliverCompany: "京東快遞",
          expressState: "1",
        },
        {
          deliverCompany: "順豐快遞",
          expressState: "2",
        },
        {
          deliverCompany: "中通快遞",
          expressState: "3",
        },
        {
          deliverCompany: "郵政快遞",
          expressState: "4",
        },
        {
          deliverCompany: "極兔快遞",
          expressState: "5",
        },
        {
          deliverCompany: "某某快遞",
          expressState: null,
        },
      ],
    };
  },
};
</script>

使用filter實現(xiàn)

這里我們就不用全局filter了，使用組件內(nèi)部的filter

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快遞公司:{{ item.deliverCompany }}</li>
      <!-- 使用過濾器語法 -->
      <li>運輸狀態(tài):{{ item.expressState | showState }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // data ...... 篇幅有限直接省略掉
  // 在組件內(nèi)定義，然后根據(jù)不同的狀態(tài)返回不同的值內(nèi)容
  filters: {
    showState(state) {
      switch (state) {
        case "1":
          return "待發(fā)貨";
          break;
        case "2":
          return "已發(fā)貨";
          break;
        case "3":
          return "運輸中";
          break;
        case "4":
          return "派件中";
          break;
        case "5":
          return "已收貨";
          break;
        default:
          return "快遞信息丟失";
          break;
      }
    },
  },
};
</script>

使用computed實現(xiàn)

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快遞公司:{{ item.deliverCompany }}</li>
      <!-- 使用計算屬性 -->
      <li>運輸狀態(tài):{{ computedText(item.expressState) }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // data ...... 篇幅有限直接省略掉
  computed: {
    computedText() {
      // 計算屬性要return一個函數(shù)接收參數(shù)
      return function (state) {
        switch (state) {
          case "1":
            return "待發(fā)貨";
            break;
          case "2":
            return "已發(fā)貨";
            break;
          case "3":
            return "運輸中";
            break;
          case "4":
            return "派件中";
            break;
          case "5":
            return "已收貨";
            break;
          default:
            return "快遞信息丟失";
            break;
        }
      };
    },
  },
};
</script>

使用methods實現(xiàn)

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快遞公司:{{ item.deliverCompany }}</li>
      <!-- 使用方法 -->
      <li>運輸狀態(tài):{{ methodsText(item.expressState) }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // data ...... 篇幅有限直接省略掉
  methods: {
    methodsText(state) {
      switch (state) {
        case "1":
          return "待發(fā)貨";
          break;
        case "2":
          return "已發(fā)貨";
          break;
        case "3":
          return "運輸中";
          break;
        case "4":
          return "派件中";
          break;
        case "5":
          return "已收貨";
          break;
        default:
          return "快遞信息丟失";
          break;
      }
    },
  },
};
</script>