共计 2555 个字符，预计需要花费 7 分钟才能阅读完成。
问题形容
去年，也就是 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 哇的一声哭了进去）