详解vue中的compute,vue中的意思
本文主要介绍了Vue中的保活技术，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.导言2。使用2.1参数2.2生命周期功能2.3应用场景总结
1. 简介
Keep-alive是Vue的内置组件。当它包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。与transition类似，keep-alive是一个抽象组件：它不会将自身呈现为DOM元素，也不会出现在父组件链中。
作用：在组件切换过程中将状态保留在内存中，防止DOM的重复渲染，减少加载时间和性能消耗，提高用户体验。
原理：调用创建的函数时，需要缓存的VNode节点保存在this.cache中。/渲染(页面渲染)时，如果VNode名称满足缓存条件(可以通过include和exclude来控制)，则将之前缓存的VNode实例从this.cache中取出进行渲染。
(VNode:虚拟DOM，实际上是一个JS对象)
2. 使用
2.1 参数
参数值描述包括字符串或正则表达式。只有名称匹配的组件才会被缓存。排除字符串或正则表达式。任何名称匹配的组件都不会被缓存。最大数量可以缓存最大数量的组件实例。注意：包含/排除值是组件中的名称命名，而不是路由中的组件名称命名；
//router.js
{
路径：“/home”，
姓名：家，
组件：()=导入(./views/home . vue’)
},
{
路径：“/test”，
名称：“测试”，
组件：()=导入(./views/test . vue’)
},
//App.vue
保持活动包括=test
路由器-视图/
/保持活力
-
补充：各种形式的包含/排除值。
//1.组件名测试将被缓存(基本)
保持活动包括=test
路由器-视图/
/保持活力
//2.将名为A或B的缓存组件与动态组件结合使用。
保持活动包括=a，b
路由器-视图/
/保持活力
//3.若要使用正则表达式，请使用v-bind。
keep-alive :include=/ab/
路由器-视图/
/保持活力
//4.动态判断
keep-alive:include= included components
路由器-视图/
/保持活力
//5.组件名测试将不会被缓存。
保持活动排除=test
路由器-视图/
/保持活力
//6.与过渡一起使用
过渡
点火电极
路由器-视图/
/保持活力
/过渡
//7.数组(使用“v-bind ”)
keep-alive :include=[a ， b]
组件：is= view /组件
/保持活力
//test.vue
模板
div class=wrap
输入类型=文本 v-模型=输入值
/div
/模板
脚本
导出默认值{
名称：“测试”，
data(){
返回{
输入值：，
}
}
}
/脚本
此时，当我们切换路由时，会发现测试文件中的inputVal会被缓存，而home中的值不会被缓存。
此外，我们还可以通过路由中的 meta 属性来控制，是否需要缓存。在测试路线中添加元。keepAlive属性为true，表示需要缓存当前路由组件。
//router.js
{
路径：“/home”，
姓名：家，
组件：()=导入(./views/home . vue’)
},
{
路径：“/test”，
名称：“测试”，
元：{
keepAlive:真
},
组件：()=导入(./views/test . vue’)
},
KeepAlive代码可以用v-if包装。如果meta中的keep-alive为true，则将被缓存。没有哪一方不会缓存它。
点火电极
router-view v-if= $ route . meta . keepalive /
/保持活力
路由器-查看v-if=！$route.meta.keepAlive /
在实践中，我们可以结合route guard来实现对需要缓存的组件的缓存。
Portal:详细讲解Vue路由钩子和应用场景。
导出默认值{
beforeRouteLeave(收件人、发件人、下一个){
to . meta . keepalive=true；
next()；
}
}
/脚本
2.2 生命周期函数
描述激活名称是在激活保活组件时调用的，在服务器端渲染时不调用钩子函数。停用keep-alive组件时调用Deactivated，在服务器端呈现期间不调用挂钩。使用keep-alive会将数据保留在内存中。如果想在每次进入页面时都获得最新的数据，就需要在激活阶段获得数据，并承担在最初创建的hook中获得数据的任务。
在keep-alive中创建的组件将有两个生命周期挂钩：激活和停用。
Activated:在组件被激活时调用，也在组件首次呈现时调用，然后在每次keep-alive被激活时调用。
停用：当组件被停用时调用。
注意：这两个生命周期只有在组件被包裹在keep-alive中时才会被调用，而作为普通组件使用时不会被调用，而2.1.0版本以后，即使被包裹在keep-alive中，使用exclude排除后这两个钩子仍然不会被调用！另外，这个钩子在服务器渲染的时候不会被调用。
什么时候获取数据？
引入keep-alive时，页面第一次进入时，钩子的触发顺序是创建-挂载-激活，退出时触发停用。
再次进入(向前或向后)时，只触发激活。
我们知道，keep-alive之后，页面模板第一次初始化解析成HTML片段后，不会重新解析而是再次进入时读取内存中的数据。只有当数据发生变化时，才使用VirtualDOM进行diff更新。因此，页面输入的数据采集也应该被激活。数据下载后，DOM手动操作的部分也要在activated中执行才能生效。
因此，数据采集代码的副本应保持激活状态，或者创建的代码应直接转换为激活状态，而不包括已创建的部分。
2.3 应用场景
如果不使用keep-alive组件，页面回滚时仍然会重新渲染页面，触发已创建的钩子，体验不好。
在以下场景中使用保活组件将显著改善用户体验，例如菜单具有多级关系的场景(列表页面详细信息页面):
在列表页面，点击商品跳转到商品详情，返回后仍会显示原有信息；列表跳转到订单明细、退货等场景；
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。