vue项目router切换太慢问题

问题定位：

随着项目增大，有一天突然发现页面切换时候，要等1-2s页面才切换过去，然后就开始定位问题，刚开始以为时页面组件太多导致的，通过删除组件，发现没啥改善，然后就在两个页面打印日志，第二页面created周期时间和路由切换时间相差不大，可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志，发现destroyed->router切换耗时1.5s左右，这时候定位问题是vue的destroyed周期耗时。

destroyed周期耗时：

这时候就考虑destroyed为啥要那么久，这时候就很纳闷，第一反应肯定是页面组件太多，这是把组件都删了，还是很慢，然后页面就剩下一个表格和查询条件，然后就想是不是数据量太大导致destroyed耗时，然后就查页面接口，发现有个list接口有4000多条数据，然后去掉接口，页面切换立马流畅了；就想数据多为啥导致销毁耗时，然后就想到了这个list是下拉框，这4000多条数都渲染在页面上，销毁不耗时才怪呢。

selected下拉框数据多，导致销毁耗时

然后就想办法处理select数据多问题，第一时间想用服务端过滤，想到服务端性能跟不上，只能在前端过滤；然后就想办法在前端过滤，初始化不给值，筛选的时候才给筛选过后的值

    remoteMethod(query) {
      if (query !== "") {
        this.selectLoading = true;
        setTimeout(() => {
          this.selectLoading = false;
          this.source.storeSelectList = this.source.storeList.filter(item => {
            return (
              item.storeName && item.storeName.toLowerCase().indexOf(query.toLowerCase()) > -1
            );
          });
        }, 200);
      } else {
        this.source.storeSelectList = this.search.brandId
          ? this.source.storeList
          : [];
      }
    }