一块学Vue:学习日记 - 利用Vue实现冒泡排序的过程展示器_第二次优化

前言

  前文对最初版本冒泡排序过程展示器做了第一次的优化，详见：
  一块学Vue:学习日记_2020.1.7 - 利用Vue实现冒泡排序的过程展示器_第一次优化https://blog.csdn.net/qq493919692/article/details/103838819
  既然有了这一篇文章说明上一次优化后又遗留了一部分问题需要解决。
  前文最后也提到了大致的解决方案：重新申请一个变量作为当前操作状态的标识符，然后把所有操作相关方法以及按钮的控制依赖这个标识符重写一遍逻辑。
  等于说进行了一次小的重构。
  听起来很麻烦，但其实也还好，毕竟只是一个小工具的程序，需要修改的代码又能有多少呢，是吧。
  OK，接下来马上开始！

1.重构

  先不管前文留下的几个问题，我们先把现有的功能重构。

1.1重构数据部分

  这里把这么多属性通过计算属性的方式绑定给state，在性能方面还是有待商榷的。state每次改动，所有的属性都需要重新计算一次，这比把按钮控制直接放在下面操作方法代码中性能消耗大多了。但是放在操作方法代码中的话，管理和维护就很麻烦。
  然后这里我有想到过另一种写法，不写这么多逻辑判定，因为这样看起来也很不清晰。
  比如：

this.state == 5 || this.state == 9 || this.state == 0 ? true : false;

  可以改成

[5, 9, 0].indexOf(this.state) != -1?true : false;

  下面这种写法感觉上维护更容易，但还是那个问题，不知道性能上的表现如何。所以还是没有直接使用。

  这里不再直接用Object.assign()去修改$data来达到恢复初始状态的目的。出