VUE keep-alive( 组件缓存)

作用：页面缓存

最近做项目遇到这样的需求，点击列表进去详情页面，返回回来需要保持列表页的滚动条的深度，查阅文档发现vue里面有对“页面缓存的处理方法”，就是keep-alive

通常在Vue构建的单页面应用（SPA）中，路由模块一般使用vue-router。vue-router不保存被切换组件的状态，它进行push或者replace时，旧组件会被销毁，而新组件会被新建，走一遍完整的生命周期

使用方法

keep-alive是个抽象组件，实际上不会被渲染在DOM树中。它的作用是在内存中缓存组件（不让组件销毁），等到下次再渲染的时候，还会保持其中的所有状态，并且会触发activated钩子函数。因为缓存的需要通常出现在页面切换时，所以常与router-view一起出现（参考，vue官方文档）

<keep-alive>
	<router-view />
</keep-alive>

这样每一个在router-view中渲染的组件都会被缓存起来。

但是这时候会遇到另外一些情况，你并不想所有页面都被缓存起来，就要使用keep-alive组件的include/exclude属性。include属性表示要缓存的组件名（即组件定义时的name属性），接收的类型为string、RegExp或string数组；exclude属性有着相反的作用，匹配到的组件不会被缓存

keep-alive :include="['Shoplist', 'Shopdetail']">
	<router-view />
</keep-alive>

另一种方式

在路由里面配置 meta属性

{
  path: '/shoplist',
  name: 'shoplist',
  component: Shoplist,
  meta: {
    keepAlive: true 
  }
},
{
  path: '/shopdetail',
  name: 'shopdetail',
  component: Shopdetail,
  meta: {
    keepAlive: true 
  }
}

在 app.vue里配置

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

总结

keep-alive作为功能型组件，实现了对组件的缓存。但这时一些组件的钩子就会没有作用，如果需要更新数据，你可能要去watch一些东西。