三门网站建设网站优化北京seo

一、什么是keep-alive？

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

二、keep-alive的优点？

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

三、keep-alive有三属性

include - 字符串或正则表达，只有匹配的组件会被缓存
max-数字，最多可以缓存多少组件实例
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

代码

<keep-alive include="home"><router-view />
</keep-alive>
//这串代码表示home组件会被缓存，而其他路由没配置就不会被缓存

四、keep-alive的使用会触发两个生命周期函数?

• activated 在keep-alive组件激活之前也就是当显示组件时触发
• deactivated 在keep-alive组件激活之后当隐藏缓存组件时触发

五、使用场景

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

在路由中设置keepAlive属性判断是否需要缓存

{path: 'list',name: 'itemList', // 列表页component (resolve) {require(['@/pages/item/list'], resolve)},meta: {keepAlive: true,title: '列表页'}
}

使用 <keep-alive>

<div id="app" class='wrapper'><keep-alive><!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

六、缓存后如何获取数据

解决方案可以有以下两种：

• beforeRouteEnter
• activated

beforeRouteEnter

beforeRouteEnter(to, from, next){next(vm=>{console.log(vm)// 每次进入路由执行vm.getData()  // 获取数据})
},

activated(){this.getData() // 获取数据
},