iis7配置asp网站,织梦网站教程,免费做网站公司哪家好,宁波网站建设建站厂家一、什么是keep-alive#xff1f;
keep-alive 是 Vue 的内置组件#xff0c;当它包裹动态组件时#xff0c;会缓存不活动的组件实例#xff0c;而不是销毁它们。keep-alive 是一个抽象组件#xff1a;它自身不会渲染成一个 DOM 元素#xff0c;也不会出现在父组件链中。…一、什么是keep-alive
keep-alive 是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件链中。
二、keep-alive的优点
在组件切换过程中 把切换出去的组件保留在内存中防止重复渲染DOM减少加载时间及性能消耗提高用户体验性
三、keep-alive有三属性 include - 字符串或正则表达只有匹配的组件会被缓存 max-数字最多可以缓存多少组件实例 exclude - 字符串或正则表达式任何匹配的组件都不会被缓存 代码
keep-alive includehomerouter-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 idapp classwrapperkeep-alive!-- 需要缓存的视图组件 -- router-view v-if$route.meta.keepAlive/router-view/keep-alive!-- 不需要缓存的视图组件 --router-view v-if!$route.meta.keepAlive/router-view
/div六、缓存后如何获取数据
解决方案可以有以下两种
beforeRouteEnteractivated
beforeRouteEnter
每次组件渲染的时候都会执行beforeRouteEnter
beforeRouteEnter(to, from, next){next(vm{console.log(vm)// 每次进入路由执行vm.getData() // 获取数据})
},activated
在keep-alive缓存的组件被激活的时候都会执行activated钩子
activated(){this.getData() // 获取数据
},注意服务器端渲染期间acvtived不被调用。
