Vue3删除过滤器的原因

最近，在复习Vue的时候，发现了一个很有意思的事情。之前没有看到过的filter过滤器突然出现在我的视线当中。于是，我就将它应用到Vue3项目中，但发现，无论怎么样应用，项目都报错。然后，才发现，Vue3之后filter过滤器就被删掉了。下面来看看Vue3被删掉的原因：

首先，要清楚过滤器的目的是更改数据格式。但是Vue中也可以通过methods和computed来更改数据格式。

因此，我认为Vue3中删除过滤器的原因在于代码精简，因为在Vue3中可以用computed或者methods来代替过滤器，因此过滤器这个功能就没有必要继续添加了。

这样的话，维护起来也比较方便。

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>

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>

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>

总结一下：

vue3删除了filter就好比：

​ 员工filter会干的活，员工computed和员工methods也会干，而且比员工filter干得多，干的好。这样的话，老板vue就把filter开除了，filter就被fired了。毕竟多一个员工，多一些用工成本（员工filter哇的一声哭了出来）！✌✌✌