vue3刪除過濾器的原因

Posted on by

什麼是vue的過濾器

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

  • 比如枚舉值可以使用過濾器：如 1 2 3 4 對應 成功 失敗 進行中 已退回
  • 比如價格後面跟個過濾器，將價格格式化成小數點兩位
  • 比如時間格式化等

詳細請看官方文檔

why？

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

舉例分析

需求描述

假設我們有一個快遞信息，後端返回給我們的並不是具體的狀態值，而是對應的字符串1 2 3 4 5 6等，不同的狀態有著一套對應

規則，比如狀態為1是待發貨等，具體效果圖和狀態對應關系如下圖：

HTML結構和data數據如下

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快遞公司:{{ item.deliverCompany }}</li>
      <li>運輸狀態:{{ 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實現

這裡我們就不用全局filter瞭，使用組件內部的filter

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

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

使用computed實現

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

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

使用methods實現

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

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

看到瞭叭，filter過濾器能加工數據，computed計算屬性和methods方法也都可以加工數據，這樣的話，就重復瞭…

總結

vue3刪除瞭filter就好比：

員工filter會幹的活，員工computed和員工methods也會幹，而且比員工filter幹得多，幹的好。這樣的話，老板vue就把filter開除瞭，filter就被fired瞭。畢竟多一個員工，多一些用工成本（員工filter哇的一聲哭瞭出來）

以上就是vue3刪除過濾器的原因的詳細內容，更多關於vue3刪除過濾器的資料請關註WalkonNet其它相關文章！

推薦閱讀：