vue 单页应用 使用keep-alive 和 router-view 实现缓存路由后 进行路由切换时 出现卡顿

Question

使用keep-alive进行页面缓存，router切换页面的时候，卡顿：当前页面停留了一下，才切换到新页面，请问这是问么回事呢？

并且页面打开一段时间后，路由切换会变得越来越卡，最后甚至卡死

Answer 1

已解决，针对前端的问题做了优化解决方案

1、一个页面组件内表格太多，没有拆分为多个组件，这样状态条件切换时，会造成卡顿；

2、多表格绑定的同一个数据集，数据变化时，会造成多个表格同时渲染，会造成卡顿，影响性能；

①②解决方案：

状态tab的切换控制，与表格显示的控制，不要使用同一个变量；

表格显示的控制使用 v-if

在状态tab变量watch方法里：

selectTab:{
    handler(newVal){
        ......
        
        this.表格绑定的数据集变量 = [];  // 先将数据清空
        this.Tab = '-1';  // 然后将控制表格显示的变量变为 -1，也就是所有表格都不会显示
        this.$nextTick(()=>{
            // 待上面的改变渲染完成后，再将控制表格的变量设置为状态切换变量值，然后再执行后端请求查询
            this.Tab = newVal;
            this.query();
        })
    }
}

3、表格有很多固定列、合计脚会导致降低页面渲染速度；

解决方法：

尽量减少固定列和合计脚；配置vxe-table虚拟滚动属性，实现虚拟滚动渲染，会大大提供渲染性能。

并且，还可以设置表格内容显示不自动换行的属性，来提高渲染性能。

4、弹出层编辑页面组件，在管理页面里默认被渲染了只是没显示，影响页面渲染显示效率；

解决方法：

将v-show改为v-if控制；

编辑页面组件中，在 beforeDestroy 方法里调用执行 vxe-modal 的 close 方法

beforeDestroy(){
    this.$refs['vxe-modal ref名称'].close();
}

5、部门、职员、交易方、港口、国家等下拉选择框，下拉项太多，没有改为输入后再查询显示下拉，影响页面渲染显示效率；

解决方法：

下拉选项超过50个的，都应该使用输入后再模糊搜索显示下拉项；

6、组件内data里定义的数组或对象变量，如果变量内部结构及内部属性值不会变化的，在给该变量赋值时，可使用冻结对象，如下代码，是给组件中职员数组变量 allPer 赋值冻结对象

原因：一般是数组记录比较多的，属性字段比较多的，不做冻结处理，vue会做处理导致占用大量内存空间

⑤⑥ 解决方法：

管理页面：

• 条件项中的下拉选项对应数组或对象变量，做冻结处理后再赋值 ；
• 表格绑定的数据集，做冻结处理后再赋值；

编辑页面：

• 表单中下拉选项对应数组或对象变量，做冻结处理后再赋值 ；

详情页面：

• 页面所有表格对应的数组，以及一些需要用到的辅助数据，做冻结处理后再赋值 ；

分析页面：

• 条件项中的下拉选项对应数组或对象变量，做冻结处理后再赋值 ；
• 表格绑定的数据集，做冻结处理后再赋值；

getPer() {
    return this.$dmBaseSet.personData().then((data)=>{

        this.allPer = Object.freeze(data.list || []);

    })
},

7、部门、职员、交易方、字典、港口、国家等接口查询数据缓存到前端时，要做优化，接口只返回需要的字段

不要把所有字段都返回过来；
优化后，可以减少JS占用内存；
职员接口：40多个字段
部门：20多个字段

8、前端工程使用echarts时，不要在main全局加载到vue对象，要改为在对应页面组件中加载echarts插件去使用，这样可以减少echart占用的内存；