使用vue.js内置组件的保活组件

Keep-alive是Vue.js的内置组件，当keep-alive包装动态组件时，它会缓存非活动的组件实例，而不是销毁它们。它不会单独呈现一个DOM元素，也不会出现在父组件链中。当一个组件被切换到保持活动状态时，其激活和停用的生命周期挂钩功能将被相应地执行。它提供了两个属性，包括和排除，允许组件有条件地缓存。

给我一个栗子

keep-alive路由器-view v-if=' $ route . meta . keep alive '/路由器-view /keep-alive路由器-view v-if='！$ route . meta . keepalive '/路由器视图

当点击按钮时，两个输入会切换，但此时这两个输入框的状态会被缓存，输入标签中的内容不会因为组件的切换而消失。

* include-string或正则表达式。只会缓存匹配的组件。* exclude-字符串或正则表达式。任何匹配的组件都不会被缓存。

保活包含=' a '组件/组件/保活只缓存名称为a的组件。

Keep-alive exclude=' a '组件/组件/keep-alive，所有名为a的组件都被缓存。

生命周期挂钩

生命挂钩保活提供两个生命挂钩，可以激活也可以去激活。

Keep-alive会将组件保存在内存中，但不会销毁或重新创建，因此不会再次调用组件的创建方法，需要激活和停用的life hooks来知道当前组件是否活动。

深入研究保活组件的实现

请检查vue vue - keep-alive组件的源代码，以获取以下信息

创建的钩子创建一个缓存对象，该对象用作保存vnode节点的缓存容器。

prop : { include : pattern pes，exclude: patternTypes，max: [String，Number]}，Created(){//create cache object this。cache=对象。create(null)//为此创建一个密钥别名数组(组件名)。key=[]}，当组件被销毁时，destroy hook将清除缓存中的所有组件实例。

explored(){/*遍历并销毁所有缓存的组件实例*/for (const key在此。缓存){ pruncheentry(this。缓存，钥匙，这个。keys)}}，33603360demo

render () { /*获取插槽*/const slot=this .$slots.default /*根据插槽获取第一个组件组件*/const Vnode : Vnode=get first组件子代(插槽)const componentOptions:vnode组件选项=vnode vnode。组件选项if(组件选项){//获取组件的名称（是否设置了组件名称名字，没有则返回组件标签名称)const name:string=getcomponent name(组件选项)//解构对象赋值常量const { include，exclude }=this if (/* name不在inlcude中或者在排除中则直接返回vnode *///不包括（包括(!名称||!匹配（包括，名称)))|| //排除（排除名称匹配（排除，名称))){返回vnode }常量{缓存，键}=这个const key:string=vnode.key==null //相同的构造函数可能会注册为不同的本地组件//因此仅国际开发委员会是不够的(#3269)?组件选项actor . cid(ComponentOptions . tag？` : $ { componentOptions。标记} ` : ' '): vnode。key if(缓存[key]){//判断当前是否有缓存，有则取缓存的实例，无则进行缓存vnode.componentInstance=缓存[键]。componentInstance //使当前密钥最新鲜移除（密钥，密钥)密钥。推送(密钥)} else { cache[密钥]=vnode密钥。推送(密钥)//判断是否设置了最大缓存实例数量，超过则删除最老的数据，如果(这个。最大键数。长度Parseint(这。max)){ Pronecacheentry(缓存，键[0]，键，这个._vnode) } } //给虚拟节点打上缓存标记vnode.data.keepAlive=true }返回vnode ||(插槽插槽[0])}//销毁实例函数PronecacheEntry(缓存： vnode缓存，key:字符串，keys: Arraystring，当前？ VNode){ const cached=cache[key]if(cached(！current | | cached.tag！==当前。标记)){缓存。组件实例。$ destroy()}缓存[key]=null remove(key，key)}//缓存Function Pronecache(keepAliveInstance : any，filter : Function){ const { cache，key，_ vnode }=keepAliveInstance for(const key in cache){ const cached node :VNode=cache[key]if(缓存节点){ const name :string=getcomponent name(缓存节点。组件选项)//组件名字不符合补白条件，销毁实例，移除cahe if(姓名！筛选器(名称)){ Pruncache条目(缓存、密钥、密钥、_ vnode)} }//筛选过滤函数函数匹配(模式n :字符串| RegExp | Arraystring，名称：字符串):布尔值{ if(array。isarray(pattern)){返回模式。indexof(name)-1 } else if(模式类型===' string '){ return pattern。拆分('，').indexOf(name)-1 } else if(isRegExp(pattern)){ return pattern。测试(名称)}/*伊斯坦布尔忽略next */return false}//检测包括和排除数据的变化，实时写入读取缓存或者删除挂载(){这个.$watch('include '，val={ PrIncache(this，name=matches(val，name)) }) this .$watch('exclude '，val={ Pruncache(this，name=！匹配(val，name)) })}，3360:

通过查看某视频剪辑软件源码可以看出保持活力默认传递3个属性，包括、排除、最大、最大最大可缓存的长度

结合源码我们可以实现一个可配置缓存的路由器视图

！-排除-字符串或正则表达式。任何匹配的组件都不会被缓存。 - !-待办事项匹配首先检查组件自身的名字选项，如果名字选项不可用，则匹配它的局部注册名称-keep-alive : exclude=' keep alive config。value ' router-view class=' child-view ' : key=' $ route。完整路径/路由器视图/保持活动状态！-或者-keep-alive : include=' keep alive config。value ' router-view class=' child-view ' : key=' $ route。完整路径/路由器视图/保持活动状态！-具体使用包括还是排除根据项目是否需要缓存的页面数量多少来决定-创建一个keepaliveconfigf。射流研究…放置需要匹配的组件名

//路由组件命名集合var arr=['组件1 '，'组件2 ']；导出默认值{ value : Routelist。join()}；配置重置缓存的全局方法

从“keepaliveconfig . js”vue . mixin({ methods : {//传入组件名resetkeepaive(name){ const conf=keepaliveconfig . value)导入keepaliveconfig；let arr=keepaliveconfig . value . split('，')；if(name type of name==' string '){ let I=arr . indexof(name)；if (i -1) { arr.splice(i，1)；keepaliveconfig . value=arr . join()；setTimeout(()={ keepaliveconfig . value=conf }，500)；}}}，}})在适当的时候调用this.resetKeepAive(name)来触发keep-alive来销毁组件实例；

在Vue.js内部，DOM节点抽象为VNode节点，保活组件的缓存基于VNode节点，而不是直接存储DOM结构。它将满足条件的组件缓存在缓存对象中，然后从缓存对象中取出vnode节点，并在需要重新呈现时呈现它。

摘要

以上是边肖介绍的vue.js内置组件的保活组件的使用。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！