怎么缓存当前的组件？缓存后怎么更新？

今天研究下如果需要缓存组件，vue提供的解决方式keep-alive

---

一、Keep-alive 是什么？

🍕🍕🍕内部实现的内置组件，解决的场景是 在组件切换过程中可以将状态保留在内存中，防止重复渲染 DOM，从防止重复渲染 DOM这个方面来看，是一种优化机制。
可以设置一下三个属性：

• include -字符串或正则表达式。只有名称匹配的组件才会被缓存
• exclude-字符串或正则表达式。任何名称匹配的组件都不会被缓存
• max -数字。最多可以缓存多少组件实例。
  🌭🌭🌭基本用法

<keep-alive>
  <component :is="view"></component>
</keep-alive>
1
2
3

使用 include和exclude

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
//正则表达式(使用v-bind)
<keep-alive :include="/a|b/">
	<component :is="view"></component>
</keep-alive>
// 数组(使用v-bind)
<keep-alive>
  <component is="view"></component>
</keep-alive>
1
2
3
4
5
6
7
8
9
10
11

🍟匹配机制 首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称，匿名组件不能被匹配。
设置了keep-alive缓存的组件，会多出两个生命周期钩子，activated与deactivated

• 首次进入组件时：beforeRouteEnter>beforeCreate>created>mounted>activated>beforeRouteLeave>deactivated
• 再次进入组件时：beforeRouteEnter>activated>beforeRouteLeave>deactivated

二、使用场景

🍔当我们在某些场景下不需要让页面重新加载时我们可以使用keep-alive
例如：
首页>列表页>商品页>返回。
此时列表页是需要缓存的，按需来控制页面的 keep-alive

在路由中设置keep-alive属性判断是否缓存

{
  path:'list',
  name:'itemList',
  component(resolve){
	require(['@/pages/item/list'],resolve)	
  },
  meta:{
	keepAlive:true,
	title:'列表页'
	}
}
1
2
3
4
5
6
7
8
9
10
11

使用

<div id="app" class="">
 <keep-alive>
 //需要缓存的视图组件
	<router-view v-if="$route.meta.keepAlive">router-view>
	// 不需要缓存的视图组件
	<router-view v-if="!$route.meta.keepAlive">router-view>	
 keep-alive>
div>
1
2
3
4
5
6
7
8

缓存后如何获取数据

两种

• beforeRouteEnter
• actived

beforeRouteEnter

🍕 每次组件渲染时，会执行此函数

beforeRouteEnter(to,from,next){
  next(vm=>{
	console.log(vm)
	vm.getData()//获取数据
	})
}
1
2
3
4
5
6

actived
在 缓存的组件被激活时，会执行 actived函数

actived(){
  this.getData()
}
1
2
3

注意:服务器端渲染期间 actived 不被调用。