秋痕语录

Vue来回切换页面不重新加载 --keep-alive

微信截图_20181101141905.png

vue通过路由来回切换两个页面,默认会重新加载当前页面,导致页面不流畅&&加载时间过长等。

是Vue的内置的一个组件,可以在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

当使用 包裹动态组件时,会缓存不活动的组件实例,但不是销毁它们。与 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。

  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

//?组件
export?default?{?
?name:?'test-keep-alive',
??data?()?{????
?????return?{????????
???????includedComponents:?"test-keep-alive"
????}
??}
}
????
??????
??????
????
????
????
??????
??????
????
????
????
????
??????
????
????
????
????
??????
????
????
????
??????
??????
????

适用于Vue2.X

keep-alive生命周期钩子函数:activated、deactivated

使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。


打赏

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

?2017 Lxy 豫ICP备17013024号
Copyright2017 lixueyang All Rights Reserved

公告

Welcome to my blog, where you will experience the thrill of not exceeding