vue - keep-alive 的使用

  当不希望组件被重新渲染影响使用体验，或者处于性能考虑，避免多次重复渲染降低性能，希望组件可以缓存下来，维持当前的状态，此时就可以用到 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:'商品管理'
	}
}