可以看到，我还引入了一个Bar.vue组件用于展示胜率，这是因为我希望最终的实际效果是这样的：

一开始我直接在胜率所在的标签中进行各种操作，但可想而知在进行一些边界情况的判断时，会出现各种含有player.weeklyWins,player.weeklyLosses等长命名变量的三元表达式。本来是出于便利考虑，却反而导致代码难以维护。因此新建了个一个bar组件，将胜负传入组件中，在bar组件内部用更语义化的方式实现，Bar.vue中模板部分代码如下：

更好理解和维护了，不是吗？

在使用vue的过程中，需要注意的是框架中许多方法其实在内部最终是殊途同归。

例如我们可以直接在元素中执行一些对数据的操作，例如@click="show = !show"，同样的我们也可以对事件绑定方法，再在方法中操作数据，例如@click="toggle",toggle () { this.show = !this.show }。还比如我们可以用computed属性和watch属性实现很多相同的功能，接下来还将用computed去实现和filters相同的功能。

vue设计中的灵活性让我们有了更多的可能性，但在学习时，应该以搞明白不同方式在不同场景中的优劣为目标，实际运用时选择最好的那一种。

用filters实现需求

在例子中，players实际是一个5000条数据的数组，在不做任何处理时，将直接渲染出5000个

对于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放置的顺序是需要根据需求来调整的，也因为每种过滤器的内部实现效率不同，所以在需求优先级不明显时，应该以效率为优先。

注意：

例如在我的例子中，我希望可以筛选出名字或者服务器包含了我所输入内容的玩家，并且将他们按照某种方式排序，最后的结果每页只显示20条。那么显然剪切数组永远应该放在最后一步，而排序和过滤在需求中没有明显的优先级。但是大部分情况下，sort的效率都要低于filter，所以我们先进行filter，减少数组长度，再sort。

有了这一思路之后，用于v-for的

这里直接将各个变量动态化，再通过Table.vue中的input绑定v-model以及表头thead绑定@click事件来改变筛选的条件，就已经实现了大部分的搜索、过滤、分页功能。

表头改变sort排序我是通过以下代码实现的，方式可能不是太好，特此列出：

可以看到，通过vue的filters功能，已经可以轻松完成我们的大部分功能，代码量极少。这也是vue2.0前瞻发布之后，提出废弃部分filters功能后许多人反应较为强烈的原因。但是如同作者在改动说明中所说，filters对于初学者来说不易理解，并且filters的功能都可以用computed属性进行更灵活、更好把控的实现。而且在一些复杂条件下，堆叠过滤器会造成一些额外的复杂性以及不方便之处。

那么何为复杂条件呢？例如我增添两个需求，一是按职业筛选玩家，而是筛选出一定分数以上的玩家，那么后者用filterBy就不太好实现了。我们需要将对分数段的过滤放在filters之前进行，但又要注意不破坏players数组本身。在实际完成时，会发现这个过程还是比较纠结的。

除此之外，我们还会发现分页中最重要的一个信息——总页数我们获取不到。因为vue并没有把一串过滤管道中产出的最终用于v-for的数组暴露出来，所以我们无法获得这个实际被循环的数组的长度。

在实际hack这些需求时，发现很容易与filters的执行顺序发生冲突，因此决定重新用computed属性来实现一遍所有功能，不借助自带的filters。

当然，在这一段的前半部分中，我们显而易见的感受到了来自filters的便利性。如果需求中filters可以满足，那么在1.x版本中使用filters还是十分明智的！

用computed属性完成需求

在Github仓库中，我用Table.vue.bak文件储存了之前一段中用filters实现的代码，方便与我们接下里的实现进行比较。

首先整理一下用computed属性来实现的思路：

• 首先要实现filterBy,limitBy这三个filter的功能，上文中已经提到了他们的内部实现，所以分别用Array.filter,Array.sort和Array.slice重写一遍并不复杂。
• 说是computed属性实现，其实也还是只有players这个computed属性，只是在其内部执行了所有的过滤动作，我们实际是把各种过滤器的逻辑放置在各个method中。
• 不建议把各个过滤method写的过于抽象，因为就是内置filters高度抽象导致一些特殊需求无法实现，所以不妨就以最针对性的方式：一个method对应一种过滤。
• 在执行各个过滤method时，依然有最初提到的顺序带来的效率问题。因为vue牵一发而动全身的特性，任何一个过滤条件改变时，所有过滤method都会执行一遍，所以尽快用高效的过滤器缩短数组长度显得更为重要。
• 我尝试过通过watch属性实现最小化method调用，但无奈功力不够没能实现。同时我也认为前端处理大量数据的情况很少见，并且用第4点中的数据进行优化后，执行效率不算太低，所以没必要在这个方面做过多纠结。真有性能瓶颈时，从服务器端寻求解决会更简单。

注意：

根据需求目标，我设置了以下这些method（顺序即为执行顺序）：

• classFilter：过滤玩家职业，通过item.classId === this.class进行判断，this.class绑定的是一个select控件。
• queryFilter：匹配玩家姓名中的字段，通过item.name.indexOf(this.query)判断，this.query则绑定一个input控件。
• ratingFilter：筛选玩家分数段，通过item.rating >= this.rating进行判断，this.rating绑定了一个类型为range的input控件，range的范围则是用computed属性进行计算。
• sortTable：因为Array.sort进行的步数较多，所以放在数组被上述3个method处理的较短后进行。
• paginate：所有过滤操作完毕之后，就可以进行分页了。在使用Array.slice()之前，先将数组的长度传给this.total储存起来，用于在分页后计算总的页数。
• 除了以上几个过滤method以外，当然也还有handleBefore方法对数组进行前期处理。但是由于players每次都会重新计算，所以为了放止handleBefore被重复执行，应该加上一定的判断条件，例如handleBefore添加的属性是否已经存在了等等。同时，还可以把一些不需要在过滤之前执行的动作从handleBefore中拿出，例如例子中的classId转换为Icon，可以在过滤之后对最终要展示的数据进行即可，减少一些步数。所以又设置了一个handleAfter方法，用于在分页完成之后进行后续操作，当然在handleAfter中也可能重复执行，所以如果执行的操作消耗很大，建议同样添加判断，避免重复执行。

在例子代码中，我在每个方法中都统计了执行的步数，实际结果显示设置一个合理的过滤顺序可以避免一些性能问题，结果如下：

可以看出初始化时，在没有任何过滤的情况下，sort的步数较高。而一旦添加了一些过滤条件之后，顺位靠后的filter和sort的步数都会大幅度减少。

DEMO地址

由于工作比较忙，暂时没有打算将开头中展示的MyArena项目重构，不过可以想象那会是一个很好的用vue制作单页应用的示例，后续的教程中可能会用来做例子。

本次教程中的例子，专注于展示多功能表格本身