Vue project router switching problem is too slow

identify the problem:

As the project grew, one day I suddenly discovered that when switching pages, I had to wait 1-2 seconds for the page to switch. Then I started to locate the problem. At first, I thought it was caused by too many components on the page. After deleting the components, I found that there was no improvement. Then print logs on two pages. The creation cycle time of the second page and the route switching time are not much different, which can be ruled out as page rendering time. Then print the log in the destroyed cycle of the first page and find that the destroyed->router switch takes about 1.5s. At this time, the problem is that the destroyed cycle of vue takes time.

The destroyed cycle takes time:

At this time, I thought about why it took so long to destroy. At this time, I was very puzzled. The first reaction must be that there were too many components on the page. It means that all the components were deleted, and it was still very slow. Then there was only a table and query conditions left on the page. Then I wondered if the amount of data was too large, causing the destruction to take a long time. Then I checked the page interface and found that there was a list interface with more than 4,000 pieces of data. Then I removed the interface and the page switching became smooth immediately. I wondered why the destruction was caused by the large amount of data. At that time, I then thought that this list is a drop-down box. These more than 4,000 items are all rendered on the page. It is strange that it does not take time to destroy.

There is a lot of data in the selected drop-down box, which makes destruction time-consuming.

Then I tried to find a way to deal with the many problems with select data. I wanted to use server-side filtering at the first time, but I thought that the server-side performance could not keep up, so I could only filter on the front-end. Then I tried to find a way to filter on the front-end. The initialization does not give a value, and only when filtering. Give the filtered value

    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
          : [];
      }
    }