官方解释：在包装动态组件时，会缓存不活跃的组件实例，而不是销毁它们。与类似，是一个抽象组件：它本身不渲染DOM元素，也不出现在组件的父组件链中。当组件在中切换时，其激活和去激活的生命周期钩子函数将相应执行。主要用于保留组件状态或避免重新渲染。keep-alive是Vue内置的一个组件，在组件切换过程中将状态保存在内存中，再次访问时仍然保持离开前的所有状态，而不是重新初始化。这就是所谓的组件缓存。我们知道，使用路由vue-router切换组件时，状态是不保存的。当它执行$router.push()或$router.replace()时，旧的组件会被销毁，新的组件会被创建，然后走一个完整的生命周期。所以缓存经常和router-view一起出现：包含在keep-alive组件中在created中，会多出两个生命周期钩子：activated和deactivated：1.activated：激活keep-alive组件时调用2.deactivated：keep-alive组件去激活时调用注：只保留组件-alive包，这两个生命周期函数都会被调用。这两个钩子在服务器端渲染期间不会被调用。应用场景：官网有一个多tab界面的例子，写的比较详细。我们在实际开发项目中会有一些需求。比如在跳转到详情页的时候，我们需要保持列表页滚动条的位置，返回的时候还是在这个位置。这可以改善用户体验。这时候可以使用缓存组件keep-alive来解决。设置了keep-alive缓存的组件，会多出两个生命周期钩子：第一次进入组件时：beforeRouteEnter>beforeCreate>created>mounted>activated>......>beforeRouteLeave>deactivated再次进入组件时:beforeRouteEnter>activated>......>beforeRouteLeave>deactivated可以看到每次都会触发缓存组件中的activated钩子函数，所以可以通过这个钩子来判断当前组件是否需要使用缓存数据或调用接口重新加载数据。如果不使用keep-alive组件，页面回滚时会重新渲染页面，第一次进入该组件的一系列生命周期也会被一次次触发。离开组件时，使用keep-alive不会调用beforeDestroy和destroyed钩子，因为组件没有被销毁并被缓存。所以deactivatedhook可以看作是beforeDestroy和destroyed的替代品，一些缓存组件销毁时要做的操作可以放在这个hook中。需求案例最近在项目中遇到一个需要缓存的场景。主要是列表页到详情页的跳转，但是列表页有多级关系。具体要求如下：首次进入该页面时，默认显示左侧树形结构菜单。点击一个菜单，在菜单右侧加载相应的数据列表，从列表进入详细内页，然后返回到该页面，希望页面保留用户之前选择的树形菜单和数据列表.如果从其他页面进入该页面，则不需要缓存。案例实践思路：结合路由器中设置的元信息缓存列表页面。1.设置路由的meta信息constList=()=>import(/*webpackChunkName:"list"*/'../pages/List.vue')constDetail=()=>import(/*webpackChunkName:"detail"*/'../pages/Detail.vue'){path:'list',name:'list',component:List,meta:{title:'list',keepAlive:true,//需要缓存isKeep:false}},{path:'dist',name:'detail',component:Detail}2.修改渲染匹配视图组件router-view（一般是app.vue文件，根据实际需要会有所不同）
还可以使用keep-alive组件include/exclude属性，include表示要缓存的组件名称（name属性处定义时），exclude则相反，匹配到的组件不会被缓存。
