vue keepalive的作用,Vue keep-alive
众所周知，keep-alive是vue提供的一个抽象组件，主要用于缓存组件，以节省性能。本文主要介绍了Vue中keep-alive组件使用的相关信息，有需要的可以参考一下。
问题描述（什么是keep-alive）
顾名思义，保持活动状态。谁保持活跃？
首先我们知道，因为vue是组件编程，所以一个. vue文件就是一个组件。就像任何事物一样，从生到死都有一个生命周期过程。vue的组件也是如此，它们也有自己的生命周期，比如create创建组件，mounted挂载组件上挂的数据，update更新组件上挂的数据，destroy销毁组件实例。
因此，使用keep-alive意味着使组件保持活动状态，不被destroy破坏，并且始终保持活动状态。如果组件未被销毁，则装载在组件上的数据仍然存在，因此可以保留状态。因此，keep-alive可以保持组件的状态。
http协议的请求头中还有一个keep-alive，保持http调用，这样虽然：Connection: keep-alive的功能不同，但是思路是一样的，就是保持状态活动。
小demo，看一下keep-alive的使用效果
演示分为上部的路由和导航部分和下部的内容区域部分。点击上面的路线导航，路线视图会呈现相应的路线组件。效果图如下：
未使用keep-alive的效果图
对应代码
//# in app.vue
模板
div class=box
！-路线和导航-
div class=" nav "
路由器链接到=/转到主页/路由器链接
Router-link to=/about 到about页面/router-link
Router-link to=/detail 转到详细页面/router-link。
/div
！-对应路线导航的内容区域-
主要的
路由器视图/路由器视图
/main
/div
/模板
//home.vue，放置一个复选框
El-checkbox v-model=checked 备选项/el-checkbox
//about.vue，放置一个输入框。
El-input v-model= input placeholder=请输入内容/el-input
//模式的下拉框detail.vue。
El-select v-model= value placeholder=请选择
el选项
v-for=选项中的项目
:key=item.value
:label=item.label
:value=item.value
/el选项
/el-select
分析
我们发现，当我们没有使用keep-alive组件包装router-view组件时，在左边~我们在Go首页勾选，在Go about页面输入，在Go detail页面放下，离开这个路由页面，再回来，发现之前的勾选、输入、下拉选择等操作都没有了。原因很简单。当你离开这个路由页面的时候，这个路由页面对应的组件上的destroy hook方法就会被触发，然后这个路由页面对应的组件就会被销毁，组件就会被销毁，组件上挂载的数据就没有了。
同时我们可以看到，在右边的Vue.js devtools工具中，router-view视图层始终只是home、about和detail组件的来回切换，组件的来回切换实际上是组件不断创建和销毁的过程。我们来看看使用keep-alive的效果。
使用keep-alive的效果图
对应代码
模板
div class=box
！-路线和导航-
div class=" nav "
路由器链接到=/转到主页/路由器链接
Router-link to=/about 到about页面/router-link
Router-link to=/detail 转到详细页面/router-link。
/div
！-对应路线导航的内容区域-
主要的
保持活力！-使用keep-alive封装一个层，可以缓存它-
路由器视图/路由器视图
/保持活力
/main
/div
/模板
分析
我们用keep-alive包装视图层组件后，发现来回切换路由时，我们检查、录入、下拉的内容不会丢失，也就是用keep-alive保存之前的组件状态。
同时我们可以看到，在右边的Vue.js devtools工具中，router-view视图中对应的组件已经处于非活动状态。inactive英文的意思是不活动，不使用，也就是缓存，不销毁。因此，我们对组件所做的操作和组件的状态都被缓存，所以我们检查、输入和下拉的内容仍然在那里。
Vue.js devtools相当好用，可以通过Google下载。它是Vue开发中的一个很好的工具。
引出问题
当我们看到这里的时候，我们发现直接添加keep-alive会缓存路由器视图层下视图的所有组件，但是有时候，我们只想缓存其中的一部分，而不是全部。那么我们该怎么办呢？没关系，大佬们已经考虑到了，提前给我们解决了，也就是keep-alive中的include和exclude属性。
include和exclude指定是否缓存某些组件
include属性
包含的意思。值是字符串、正则表达式或数组。只有名称与include值相同的组件才会被缓存，也就是说，指定缓存哪些组件，并且可以指定多个组件。以这里的字符串为例，指定多个组件缓存，语法用逗号分隔。如下所示：
//指定缓存home组件和about组件
keep-alive include=home，about
路由器视图/路由器视图
/保持活力
exclude属性
Exclude相当于include的反义词，表示除，指定哪些组件不缓存。用法类似于include，如下所示：
//除了home组件和about组件之外，本例中只缓存了detail组件。
keep-alive exclude=home，about
路由器视图/路由器视图
/保持活力
以include="about,detail"为例的效果图
该语法意味着只缓存about和detail，而不缓存其他组件。查看下图中的vue工具，我们还可以看到，如果缓存的组件不在相应的显示路径下，它们将变为非活动状态。
除了包含和排除属性之外，keep-alive还有另一个属性，即max属性。这个max一般不会用太多，主要目的是控制缓存组件的数量，让缓存的先挤出缓存的，这也是一种相当于缓存优化的策略。毕竟，适当的缓存可以改善用户体验、缓存转换和计算机卡更换。
include和exclude的属性值是组件的名称
include和exclude的属性值是组件的名称，也就是组件的name属性值，也就是下面的name属性值。
脚本
导出默认值{
名称：“应用程序”
//.
};
/脚本
引出问题
我们知道所有组件都有相应的逻辑js部分，组件必须发送请求来获取数据。一般情况下，我们在创建或挂载的钩子中发送请求，并向后端的bosses请求数据。我们需要注意使用keep-alive后组件的钩子功能。
使用keep-alive的钩子函数执行顺序问题
首先使用keep-alive组件后，激活的钩子和停用的钩子将自动添加到组件中。
组件被激活(使用)时激活触发可以简单理解为进入此页面时触发。
组件不使用时(非活动状态)的停用触发可以简单理解为离开此页面时触发。
进入组件和离开组件钩子执行顺序
假设只缓存home组件，我们先看代码，然后在钩子中打印出相应的顺序。我知道钩子执行的顺序，自己做过印象深刻。
代码如下所示
模板
差异
El-checkbox v-model=checked 备选项/el-checkbox
/div
/模板
脚本
导出默认值{
姓名：家，
data() { return { checked: false } }，
已创建(){
Console.log(我是被创造的钩子)；
},
已安装(){
Console.log(我是挂载钩)；
},
已激活(){
Console.log(我是激活的钩子)；
},
停用(){
Console.log(我是停用的钩子)；
},
销毁前(){
Console.log(我是before destroy hook )；所以我们可以得出结论：
},
};
/脚本
按如下方式输入组件打印结果
我是被创造的钩子
我是一个被安装的钩子。
我激活了钩子。
离开组件的打印结果如下
我被解除了钩子。
得出结论
进入和离开创建-安装-激活-初始停用
后续进入和退出激活-去激活
所以我们可以在激活和停用的钩子中做一些逻辑处理。这两个钩子有点类似于mounted和beforeDestroy钩子，但是它们还是不同的。毕竟使用keep-alive不会破坏组件。
keep-alive的应用场景举例
勾选表单的一个数据详情页，会回到之前的状态，比如之前的过滤结果或者之前的页数。
填充表单的内容仍然被路由、跳过和返回。比如输入框，下拉选择框，切换开关等等。用户输入了很多东西，跳回来就不能清空了。总不能让用户再写一遍吧，老铁？
反正具体应用场景很多，这里就不赘述了。
补充
我们用保活包装router-view这个小案例来解释上面的内容。实际上，保活通常封装路由器视图或动态组件。代码其实也是这样写的。包装动态组件的用法如下：
保持活动包括=home 排除=about
组件：is= which component /组件
/保持活力
keep-alive的include和exclude属性也支持v-bind的语法，所以也非常灵活。
总结
关于vue中keep-alive组件的用法的这篇文章就到这里了。有关Vue中保持活动组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。