keep

您所在的位置：网站首页 › keep-alive的作用和特点是什么 › keep

keep

2024-07-13 18:40| 来源: 网络整理| 查看: 265

keep-alive

keep-alive是 Vue的内置组件它自身不会渲染成一个 DOM 元素

同样属于内置组件的有 transition component keep-alive的作用包裹组件时候不会销毁他们而是会缓存不活动的组件实例保留离开组件的状态例: 当离开组件或者切换路由的时候我们在当前页面滚动到一定位置再次回到当前页面时滚动位置保持不动同理input等输入的值也是一样不会清空 keep-alive的属性

keep-alive被包裹的组件是会被缓存的但是有的我们不需要缓存他就可以通过属性给他排除在外或者需要缓存哪个注: 组件内部的name值是我们是否缓存的条件

export default { name: "Home", } include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 keep-alive的生命周期被缓存组件中触发 activated :页面第一次进入的时候，钩子触发的顺序是created->mounted->activated deactivated :页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

在这里插入图片描述

keep-alive的使用 //结合动态组件缓存loading组件 //动态组件下文会讲到 //使用正则表达式，需使用v-bind //排除tab1组件根据curId缓存别的组件 (curId:组件的名称) //缓存tab1组件 curId (curId:组件的名称)组件是tab1就缓存如果是别的就不缓存 //根据路由中的meta.keepAlive是否为true来判断是否缓存 // false不缓存动态组件 Vue 中提供有一个内置的组件叫做 component 。这个组件就是动态组件。它需要设置 is 属性。is 属性的值就是需要渲染的组件的名字动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，根据对应的显示；当我们每次切换的时候,组件的生命周期钩子函数也会相应触发,也就是说动态组件切换时也会有创建销毁的性能开销所以结合keep-alive使用 keep-alive 动态组件实现选项卡 tab1 tab2 //点击时候改变curId 来显示对应的组件 //引入需要缓存的组件 import tab1 from "../../components/tab1.vue"; import tab2 from "../../components/tab2.vue"; export default { data() { return { curId: "tab1", }; }, //注册组件 components: { tab1, tab2, }, };

【本文地址】

keep

keep

今日新闻

推荐新闻