一开始我直接在胜率所在的<th>标签中进行各种操作，但可想而知在进行一些边界情况的判断时，会出现各种含有player.weeklyWins, player.weeklyLosses等长命名变量的三元表达式。本来是出于便利考虑，却反而导致代码难以维护。因此新建了个一个bar组件，将胜负传入组件中，在bar组件内部用更语义化的方式实现，Bar.vue中模板部分代码如下：
<template> <div> <span v-if="!hasGame || win / total > 0" :style="{ width: 100 * win / total + '%' }" :class="hasGame? '':'no-game'"> {{ hasGame? (100 * win / total).toFixed(1) + '%':'无场次' }} </span> <span v-if="loss / total > 0" :style="{ width: 100 * loss / total + '%' }"> {{ win === 0? '0%':'' }} </span> </div> </template>
更好理解和维护了，不是吗？
在使用vue的过程中，需要注意的是框架中许多方法其实在内部最终是殊途同归。
例如我们可以直接在元素中执行一些对数据的操作，例如@click="show = !show"，同样的我们也可以对事件绑定方法，再在方法中操作数据，例如@click="toggle", toggle () { this.show = !this.show }。还比如我们可以用computed属性和watch属性实现很多相同的功能，接下来还将用computed去实现和filters相同的功能。
vue设计中的灵活性让我们有了更多的可能性，但在学习时，应该以搞明白不同方式在不同场景中的优劣为目标，实际运用时选择最好的那一种。
用filters实现需求
在例子中，players实际是一个5000条数据的数组，在不做任何处理时，将直接渲染出5000个<tr>，所以先赶紧过滤吧！
对于v-for循环，vue中提供了3中filters过滤数组，分别为filterBy, orderBy, limitBy，其功能对应了搜索/筛选、排序和分页，实现分别是使用了Array.filter, Array.sort(), Array.slice()。
这三种filters在使用时非常便利，只要在v-for后用|分离再添加对应的filters即可，这3中filter的具体参数可以查看官方API，这里不多做赘述。
需要注意的是，实际的过程是先将被遍历的数组（例子中的players）依次通过过滤器，再将最后一个过滤器返回的数组进行v-for操作。
因此，filters放置的顺序是需要根据需求来调整的，也因为每种过滤器的内部实现效率不同，所以在需求优先级不明显时，应该以效率为优先。
注意：实际测试时，发现不论怎么过滤数组，handleBefore方法都没有再次执行，也就是说players数组并没有被改动过。
例如在我的例子中，我希望可以筛选出名字或者服务器包含了我所输入内容的玩家，并且将他们按照某种方式排序，最后的结果每页只显示20条。那么显然剪切数组永远应该放在最后一步，而排序和过滤在需求中没有明显的优先级。但是大部分情况下，sort的效率都要低于filter，所以我们先进行filter，减少数组长度，再sort。
有了这一思路之后，用于v-for的<tr>变为：
<tr v-for="player of players | filterBy query in 'name' 'realmName' | orderBy sort.key sort.val | limitBy 20 (page-1)*20" :class="player.factionId? 'horde':'alliance'">