理解keep-alive

keep-alive是什么,它有哪些用途,有没有和它紧密相连的生命周期函数?

先来看vue.js官网给出的解释:

      这个解释并不具体,我们一起来理解一下keep-alive和activated/deactivated函数的关系。其实activated和deactivated这两个生命周期函数的存在有个先决条件,就是一定要在使用了keep-alive组件后才会有,否则不存在。当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

        activated( )是组件被激活后的钩子函数,在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等,每次进入组件都会执行的方法可以放在其中,当然activated中的函数不管是否需要缓存都会执行。

keep-alive的主要用途有这几个:

用途一:包裹在<router-view/>组件外,反复进入同一页面只会发起一次请求,降低网络请求时间,提高网站性能。

用途二:动态配置路由,根据接收的不同参数来获取不同的数据。动态配置路由主要有两种办法:

一种是使用keep-alive内置组件的两个属性include和exclude,来区分组件是否需要缓存,用法如下:

第二种动态配置路由的方法,需要修改route文件下的index.js文件:

初识keep-alive的小收获,记录一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容