当不希望组件被重新渲染影响使用体验,或者处于性能考虑,避免多次重复渲染降低性能,希望组件可以缓存下来,维持当前的状态,此时就可以用到 keep-alive 组件。keep-alive 主要用于保留组件状态或避免重新渲染。
我们可以看到的现象:如果没有使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发 created 钩子,使得用户体验并不好。当然,使用这个组件的前提时页面的数据是保持不变的,不需要重新请求接口对数据进行更新。
keep-alive的生命周期:
- 初次进入:created -> mounted -> activated;退出后触发 deactivated
- 再次进入:会触发activated;事件挂载的方法等,只执行一次的放在 mounted中,组件每次进去执行的方法放在activated中
ps: activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等。
实践:
1、更改App.vue
<div id="app" class="wrapper">
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
2、在路由中设置keepAlive
{
path: 'list',
name: 'itemList', //商品管理
component: resolve => require(['@/' + viewpath], resolve), //懒加载
meta:{
keepAlive:true,
name:'商品管理'
}
}