细节复盘1 （字符串split、indexOf&选项卡-两个选项&数组里的对象排序&单页面跨路由修改样式）2020-7-31

今天写项目，有几个在意的点。

1、第一个，字符串的split()方法，可以把字符串通过一定的规则，分割变成数组。

详细看这个：https://www.runoob.com/jsref/jsref-split.html

2、字符串的indexOf()方法，可以帮助我们查询某个字符串在此字符串中首次出现的位置，如果没有查找到，则返回-1.

https://www.runoob.com/jsref/jsref-indexof.html

3、如果选项卡只有两个选项的话，可以如下写：

如果有多个的话，就得重新写逻辑了。而且这里我为了省事，没有用计算属性，整体可读性就比较差。

4、以数组里面对象的某个属性为依据，将这个数组里面的对象进行排序。

方法一：冒泡排序
遇到了这个问题，然后苦逼的我翻遍了数组的方法，也没啥思路，不得以，我用了双层for循环。

方法二：Array.sort()

注意一点：sort方法改变原数组。其实，数组的方法里面，基本上增删改都改变原数组。sort就是改。

5、如果有跨路由，但依然想实现的功能。

比如，一级路由是用定位写的，我们跳转了一个不在页面展示上的一级路由，但是想对一级路由做一些样式上的修改，就可以使用下面的一种思路。

又或者，我们从二级路由跳转到其他路由，突然发现一级路由展示的part还存在页面上，但咱们的需求是整屏修改，不能有一级路由页面啊，这时，可以试试下面的思路。

（1）在vuex中定义一个公共状态变量：用于存放状态

（2）通过钩子函数改变这个变量的状态：在通过这个路由跳转到这个组件页面时，通过实例创建完成、实例销毁完成两个钩子，切换公共变量状态值。

mutations中定义修改这个公共变量的方法：

在相关实例的钩子函数中调用，一个是在实例创建完成渲染前激活状态，改变一级路由样式；另外一个是实例销毁完成恢复一级路由的样式。

错误写法：第一次是这么写的，直接修改了vuex仓库中的数据，这样是不应该的。虽然也能出结果，但会出bug。

（3）到了怎么使用这个变量的时候了。在以及路由的某个tab中，通过判断这个变量的改变，来动态切换 次元 的样式。

结果，一级路由下，是这个样子的，

我切换后，同样是一级路由，按理说 次元 不应该显示，但他就是显示了呢。

最后，我在翻大佬们的博客时，发现了这么一句话：为了代码的简洁性，可以用计算属性computed结合仓库的数据计算仓库内state数据的变化。突然，我就有点明白，我为啥会下意识的用computed了（笑哭），而且计算属性只有在数据发生变化时才会更新数据。