KeepAlive、路由、组件懒加载

294 阅读1分钟

KeepAlive

KeepAlive,内置组件,多个组件间动态切换时缓存被移除的组件实例,有两个生命周期函数,onActivated 在组件挂载时也会调用,并且 onDeactivated 在组件卸载时也会调用

image.png

有最大缓存实例数,超过了会吧最久没用的销毁 image.png

路由懒加载

就是在点击路由是在加载,而不是首次直接加载,可以节省首次加载的速度,提高用户体验

方法是在router的index.js中,不直接import相关的路由,而是在路由配置中,component使用箭头函数,import路由的地址,这样当点击时才会加载。如果希望加载的包有名字,可以路由地址前加入webpackChunkName名字的注释

image.png

另外一种异步组件方法来实现路由懒加载

使用 component: resolve=>(require(["@/components/HelloWorld"],resolve))取代ES语法中的 component: ()=>import("@/components/HelloWorld")

组件懒加载

组件懒加载也是为了提高页面加载效率在页面需要的时候加载组件,

也是通过ES写法,调用组件是直接使用箭头函数,进行导入 image.png

另外一种异步组件方法来实现组件懒加载

使用 "One-com":resolve=>(['./one'],resolve)取代ES语法中的

"One-com": ()=>import("./one");

image.png