vue3删除过滤器的原因

2022-04-15 0 265
目录
  • 什么是vue的过滤器
  • why?
  • 举例分析
    • 需求描述
    • HTML结构和data数据如下
    • 使用filter实现
    • 使用computed实现
    • 使用methods实现
  • 总结

    什么是vue的过滤器

    过滤器可以通俗理解成是一个特殊的方法,用来加工数据的

    • 比如枚举值可以使用过滤器:如 1 2 3 4 对应 成功 失败 进行中 已退回
    • 比如价格后面跟个过滤器,将价格格式化成小数点两位
    • 比如时间格式化等

    详细请看官方文档

    why?

    笔者认为:原因就是vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现。所以就干脆把filter这方面的vue源码给删掉,这样的话,更加方便维护。

    举例分析

    需求描述

    假设我们有一个快递信息,后端返回给我们的并不是具体的状态值,而是对应的字符串1 2 3 4 5 6等,不同的状态有着一套对应

    规则,比如状态为1是待发货等,具体效果图和状态对应关系如下图:

    vue3删除过滤器的原因

    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删除过滤器的资料请关注NICE源码其它相关文章!

    免责声明:
    1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
    如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
    如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

    NICE源码网 JavaScript vue3删除过滤器的原因 https://www.niceym.com/26965.html