问题形容
去年，也就是2020年9月份，vue3进去了。减少了很多新性能，然而也删掉了一些性能。比方删掉了vue2中的过滤器filter性能。与此同时，官网倡议：用办法调用或计算属性替换过滤器。
什么是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哇的一声哭了进去）