问题定位:
随着项目增大,有一天突然发现页面切换时候,要等1-2s页面才切换过去,然后就开始定位问题,刚开始以为时页面组件太多导致的,通过删除组件,发现没啥改善,然后就在两个页面打印日志,第二页面created周期时间和路由切换时间相差不大,可以排除是页面渲染耗时。然后在第一个页面的beforeDestroy和destroyed周期里面打印日志,发现俩者之间打印时间相差很大,这时候定位问题是vue的destroyed周期耗时。
destroyed周期耗时:
这时候就考虑destroyed为啥要那么久,这时候就很纳闷,第一反应肯定是页面组件太多,这是把组件都删了,还是很慢,然后页面就剩下一个表格和查询条件,然后就想是不是数据量太大导致destroyed耗时,然后就查页面接口,发现有个list接口有4000多条数据,然后去掉接口,页面切换立马流畅了;就想数据多为啥导致销毁耗时,然后就想到了这个list是下拉框,这4000多条数都渲染在页面上,销毁不耗时才怪呢。
解决方案:
一般是采用下拉框进行分页的形式,这样避免下拉框组件过于庞大,而导致渲染和销毁的时间过长。