vue:使用keep-alive提升性能

不使用keep-alive时候:

第一次进入首页

发起一次后台请求接口

第一次跳转,也第一次发起请求

关键来了, 当按下返回键,返回到上一个单文件组件的时候,又请求了一次接口:

2个页面的反复跳转:

可以看到有时候这是十分没有必要的。

本案例发生的原因是首页组件每一次路由重新切换到该组件的时候,首页组件都会重新渲染,

钩子mounted会重新执行

所以就会获取数据向后台接口


解决步骤:

入口组件是App组件。

当然,为了排除某个页面的缓存也可以使用<keep-alive exclude="组件名",就可以排除具体某个组件的缓存

上面新加的keep-alive是vue自带的标签。

意思是我的路由的内容被加载过一次后就把路由的内容放入内存之中,下一次进入路由的时候不需要重新去渲染组件和执行钩子函数,只需要从内存中把以前的页面拿出来显示就可以了。

但也有一个问题,当重新进入首页时,假设想请求特定的url接口,即重新发起请求,又由于keep-alive缓存了内容,是不是就没办法改变缓存的内容了?

其实,当用keep-alive的时候,会多出一个生命周期函数:

请求的接口的生命周期的时候:

首次进入页面:

当进入第2个页面再返回的时候:

组件的mouted就不会执行, 只有activated执行。

在这个activated判断业务逻辑从而决定是否重新请求一次接口:[结合具体情况,这里是选择的城市和上一次选择的城市是否相等,不等就重新加载接口]

发布了307 篇原创文章 · 获赞 45 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/qq_39969226/article/details/104163663