扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！
这篇文章主要为大家展示了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
: [];
}
} 
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网