$route.meta.keepAlive"></router-view> 三、原理分析 keep-alive是vue中内置的一个组件 源码位置:src/core/components/keep-alive.js export default { name: 'keep-alive', abstract: true, props: { include: [String, RegExp, Array], exclude: [String, RegExp, Array], max: [String, Number] ...
1)vue中的keep-alive 【1】原理:Vue 的缓存机制并不是直接存储 DOM 结构,而是将 DOM 节点抽象成了一个个 VNode节点。因此,Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。 【2】参数:Keep-alive 组件提供了 include 和 exclude 两个属性,允许...
// 在首次加载被包裹组件时,由keep-alive中的render函数可知,vnode.componentInstance的值是undefined,keepAlive的值是true,因为keep-alive作为父组件,它的render函数会先于被包裹组件执行,那么就执行到i(vnode, false /* hydrating */),后面的逻辑就不再执行 if (isDef(i)) { const isReactivated = isDef(vnode...
<template><router-viewv-slot="{ Component }"><keep-alive:include="keepAliveCache"><component:is="Component":key="$route.name"/></keep-alive></router-view></template>import{ computed }from"vue";import{ useKeepAliverStore }from"@/store";constuseStore =useKeepAliverStore();constkeepAlive...
keep-alive是Vue的一个内置组件,用于包裹动态组件或路由组件,使其在切换时不会销毁,而是被缓存起来。当再次访问时,可以直接使用缓存的组件实例,而无需重新渲染。 实现带参数的路由: 在Vue Router中,你可以通过query参数或params参数来传递路由参数。例如: javascript { path: '/user/:id', name: 'User', compon...
keep-alive是一个抽象的组件,缓存的组件不会被mounted,为此提供activated和deactivated钩子函数 在2.1.0 版本后keep-alive新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存,优先级大于include) 。参数理解keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存: ...
2、include和exclude参数 include 和 exclude 属性允许组件有条件地缓存。 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示 3、 强调 nclude 和 exclude中使用的名字是在组件的名字,而不是路由中的名字。 二、 效果 about页面使用的keep-alive的缓存而home页面没用。
KeepAliveProps:可传递三个参数,include指定被缓存的组件,exclude指定不缓存的组件,max指定最大缓存组件数量; Cache:变量cache的类型,cache用于缓存组件; Keys:变量keys的类型,keys用于存储被缓存组件对应的key,用于LRU算法; KeepAliveContext:继承自ComponentRenderContext,并拓展了renderer,activate,deactivate三个字段。
{ path: '/keepalive', // keepalive component: ()=>import('../views/keepalive/index.vue'), meta: { keepAlive: true // 该页面需要keepAlive } }, { path: '/keepalive-snow', // keepalive component: ()=>import('../views/keepalive/snow.vue'), meta: { keepAlive: true // 该...
第一步:在路由配置文件中为列表页设置meta参数,里面包含useCatch和keepAlive {path: "/sportPrdtList", name: "sportPrdtList", component: resolve => require(["@/views/iceArea/sportPrdtList"], resolve), meta:{keepAlive:true,//是否缓存组件useCatch:false//是否用缓存}}, ...