一、Keep-alive 是什么？

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

可以设置一下三个属性：

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

javascript 复制代码

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

使用 include和exclude

javascript 复制代码

<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>

🍟匹配机制首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称，匿名组件不能被匹配。

设置了keep-alive缓存的组件，会多出两个生命周期钩子，activated与deactivated

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

二、使用场景

🍔当我们在某些场景下不需要让页面重新加载时我们可以使用keep-alive

例如：

首页>列表页>商品页>返回。

此时列表页是需要缓存的，按需来控制页面的 keep-alive

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

javascript 复制代码

{
  path:'list',
  name:'itemList',
  component(resolve){
	require(['@/pages/item/list'],resolve)	
  },
  meta:{
	keepAlive:true,
	title:'列表页'
	}
}

使用

html 复制代码

<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>

缓存后如何获取数据

两种

beforeRouteEnter
actived

beforeRouteEnter

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

javascript 复制代码

beforeRouteEnter(to,from,next){
  next(vm=>{
	console.log(vm)
	vm.getData()//获取数据
	})
}

actived

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

javascript 复制代码

actived(){
  this.getData()
}

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

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

文章目录

一、Keep-alive 是什么？

二、使用场景

缓存后如何获取数据

beforeRouteEnter