vue keepalive作用,vue中keepalive的用法优缺点
vue中提供了keep-alive组件来缓存状态。本文主要介绍vue中keep-alive组件的功能和用法的相关信息。有需要的可以参考一下。
前言
面试的时候，很多面试官再问他的时候可能会提到vue。你知道keep-alive有什么作用吗？
Keep-alive是vue内置的一个组件，这个组件的作用是缓存不活动的组件。我们可以知道，一般来说，当一个组件被切换时，它会被默认销毁。如果有需要，如果一个组件被切换，它不会被销毁，但会保存它以前的状态，那么可以使用keep-alive。
Keep-alive是Vue的内置组件，可以在组件切换过程中保持内存中的状态，防止DOM被重复渲染。
当keep-alive包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。与transition类似，keep-alive是一个抽象组件：它本身不呈现DOM元素，也不出现在父组件链中。
在这里，当我用scaffolding创建一个项目时，home和about这两个组件将通过routing生成和切换。
home组件
模板
div class=home
输入类型=文本
/div
/模板
脚本
//@是/src的别名
从“@/components/HelloWorld.vue”导入HelloWorld
导出默认值{
姓名：家，
组件：{
编译
}
}
/脚本
我在home组件中写了一个输入输入框。
about组件
模板
div class="关于"
输入类型=文本
/div
/模板
脚本
导出默认值{
名称：“关于”
}
/脚本
同样的about组件也有一个输入框。
当我们在home组件的输入框中输入一些内容，然后切换到about组件。当我们切换回home组件时，我们会发现之前输入的内容已经被清除。其实很好理解，就是当我们切换到about build的时候，home组件被破坏了，输入框的值自然就被清空了。
我在home组件中编写了销毁的生命周期函数。
当您切换到“关于”组件时，会触发home组件的销毁，因此home组件会被销毁。
然后，我们可以使用保活组件来包装路由器视图组件，并缓存非活动组件。
App组件
模板
div id=应用程序
div id=nav
路由器链接到=/ Home/路由器链接
路由器链接到=/about about/路由器链接
/div
点火电极
路由器-视图/
/保持活力
/div
/模板
写完后你会发现，当你切换到about组件时，home组件中的destroyed没有被触发，home组件的值被保存。
但这肯定不好。我们会发现about组件的值也被缓存，即所有路由组件都被缓存，严重浪费性能，不符合要求。我们现在只想缓存home组件。
保持活动有两个属性
或者字符串正则表达式。只有匹配的组件才会被缓存。
包含值为字符串或正则表达式匹配的组件名将被缓存。
排除值为字符串或正则表达式匹配的组件名不会被缓存。
首先，使用include实现，匹配组件中定义的名称，并缓存它。
保持活动包括=home
路由器-视图/
/保持活力
我们会发现home已经被缓存了，而about还没有。
而exclude是被排除的，所以这个就不演示了。很简单。除此之外，我们还可以通过使用路由中的meta属性来控制它。
{
路径：“/”，
姓名：家，
元：{
keepAlive:真
},
组件：主页
}
将home的路由规则clock的meta添加到keepAlive属性为true，即应该缓存当前的路由组件。
保活代码可以与v-if结合包装。如果meta中的keepAlive为true，则缓存，no端不缓存，这样更灵活。
点火电极
router-view v-if= $ route . meta . keepalive /
/保持活力
路由器-查看v-if=！$route.meta.keepAlive /
这样的组件缓存是实现了，但是还是会有一些问题，就是因为组件是缓存的而不是销毁的，所以组件在切换的时候不会重新创建，自然也不会调用created之类的生命周期函数，所以要用activated和deactivated来获取当前组件是否活动。
我在home组件中编写了激活和停用的生命周期函数。
已激活(){
Console.log(哎呀，看到我了)
console.log( - activated -)
},
停用(){
console . log(‘该死！你又走了’)
console.log( -已停用-)
}
相信通过上面的gif图你能看清楚。这个时候keep-Alive就差不多了。
总结
关于vue中keepAlive组件的功能和用法的这篇文章到此为止。关于在vue中使用keepAlive组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。