Vue.js 和 VueRouter 性能下降

Question

我使用 Vue.js 获得了 SPA 网页，并使用 VueRouter 进行路由。

例如我有 2 页：

• 首先，我得到了实体列表，每个实体都相同Components，其中包含一些数据以向客户显示信息，并在此页面上进行分页(1)，
• 在第二个得到了个人资料信息(2)。

过渡(1) => (2)用entities = [];的速度快，但是当这个名单不是空的，这种转变变得很慢，而且它依赖的entities.length。

怎么了？

1. 点击进入(2)；
2. router.beforeEach 处理程序瞬间触发；
3. (2).beforeMount 触发器；
4. (1).beforeDestroy 触发器；
5. 大延迟；
6. (1).destroyed 触发器；
7. (2).mounted触发器和(2)视觉负载。

在step 5我得到

beforeDestroy() {
    console.time(this.entity.id);
},
destroyed() {
    console.timeEnd(this.entity.id);
}

它给了这个

在entities.length == 20我们得到的控制台输出如下：

在entities.length == 60我们得到的控制台输出如下：

这个beforeDestroy => destroyed时间间隔在每一次都Entity取决于entities.length并且趋于零，Entity被破坏后，下beforeDestroy => destroyed一次间隔时间越来越少。

每个Entity内部都不知道其他的Entities。

我做错了什么以及如何解决或解决此问题？也许我想念 Vue.js 生命周期的一些东西。

提前致谢，伙计们！