• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

vue3删除过滤器的原因

vue 搞代码 4年前 (2022-01-08) 34次浏览 已收录 0个评论

去年,vue3出来了。增加了很多新功能,但是也删掉了一些功能。比如删掉了vue2中的过滤器filter功能。与此同时,官方建议:用方法调用或计算属性替换过滤器。本文将分析vue3删除过滤器的原因及如何用其他方法实现过滤器的功能

什么是vue的过滤器

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

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

详细请看官方文档

why?

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

举例分析

需求描述

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

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

HTML结构和data数据如下

  <div id="app"> <ul> <li>快递公司:{{ item.deliverCompany }}</li><li>运输状态:{{ item.expressState }}</li></ul></div>

使用filter实现

这里我们就不用全局filter了,使用组件内部的filter

  <div id="app"> <ul> <li>快递公司:{{ item.deliverCompany }}</li><!-- 使用过滤器语法 --><li>运输状态:{<p style="color:transparent">本文来源gao!daima.com搞$代!码网</p>{ item.expressState | showState }}</li></ul></div>

使用computed实现

  <div id="app"> <ul> <li>快递公司:{{ item.deliverCompany }}</li><!-- 使用计算属性 --><li>运输状态:{{ computedText(item.expressState) }}</li></ul></div>

使用methods实现

  <div id="app"> <ul> <li>快递公司:{{ item.deliverCompany }}</li><!-- 使用方法 --><li>运输状态:{{ methodsText(item.expressState) }}</li></ul></div>

看到了叭,filter过滤器能加工数据,computed计算属性和methods方法也都可以加工数据,这样的话,就重复了…

总结

vue3删除了filter就好比:

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

以上就是vue3删除过滤器的原因的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:vue3删除过滤器的原因

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址