keep-alive

一、什么是keep-alive

 

在平常开发中，有时页面跳转之间没有必要多次初始化，只需要保存页面数据即可。这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。

也就是说，keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存。
（在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性）

 

二、使用场景

在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，
比如：
在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。
在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据。
以上两种情景都会带来很不好的用户体验。此时，就需要对列表页面进行路由缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。
 

三、keep-alive基本认识

Vue中提供了一个内置组件keep-alive，使用元素将动态组件包裹起来，内部组件就会被缓存起来。

包裹的组件，加载过的页面，再次进入时，不会被再次初始化，也就意味着不会执行页面第一次进入时的部分生命周期函数。
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时Vue为我们解决了这个问题
被包含在<keep-alive>中创建的组件，会新增两个生命周期的钩子: activated 与 deactivated：

activated ：当 keep-alive 包含的组件再次渲染的时候触发
deactivated ：当 keep-alive 包含的组件销毁的时候触发

keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数
 

四、在2.1.0 版本后keep-alive新加入了两个属性

include(包含的组件缓存生效)
exclude(排除的组件不缓存，优先级大于include) 

两个属性可以让<keep-alive>实现有条件的进行缓存。include包含的组件会被进行缓存，exclude包含的组件不会被缓存。
使用 exclude 排除之后，就算被包裹在 keep-alive 中，上面两个生命周期钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。