<keep-alive>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
<keep-alive>
与 <transition>
相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent
中找不到 keep-alive
。
<keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.noKeepAlive" :key="key" />
</keep-alive>
<router-view v-if="$route.meta.noKeepAlive" :key="key" />
cachedViews中保存的是所有需要缓存的组件的name(而非router的name)
keep-alive中组件的生命周期会有actived和deactivated两个钩子
- 使用
<keep-alive>
会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated
阶段获取数据,承担原来created钩子中获取数据的任务。 - 当引入
keep-alive
的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated -
我们知道
keep-alive
之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,才使用VirtualDOM进行diff更新。故,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。所以,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。