浏览器缓存机制详解

理解keep-alive

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素

keep-alive的作用

• 在vue项目中难免会有列表页面或搜索结果列表页面，点击某个结果之后，返回回来这个页面时还是之前的搜索结果的列表* 在router-view上使用可以缓存该路由组件* 有两个参数 Props:include 字符串或正则表达式，只有匹配组件会被缓存exclude 字符串或正则表达式，任何匹配的组件都不会被缓存使用场景
  ====

• Vue中前进刷新，后退缓存用户浏览数据\

• 列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据

• 重新进入列表页面 => 获取最新的数据

使用方法

缓存动态组件

包裹动态组件时，会缓存不活动的组件实例，而不是销毁

<keep-alive><component :is='view'></component>
</keep-alive> 

缓存路由组件

使用keep-alive 可以将所有路径匹配到的路由组件都缓存起来，包括组件里面的组件

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

生命周期函数

activated

• 组件激活时使用
• 在服务端渲染期间不被调用

deactivated

• 在keep-alive组件中停用时调用
• 在服务端渲染期间不被调用
• 被包含在