小编mut*_*ica的帖子

Vue.js 和 VueRouter 性能下降

我使用 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);
}
Run Code Online (Sandbox Code Playgroud)

它给了这个

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

在此处输入图片说明

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

在此处输入图片说明

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

vue.js vue-router

5
推荐指数
0
解决办法
1618
查看次数

标签 统计

vue-router ×1

vue.js ×1