潮州网站制作,苏州做网版的公司,手机邮箱申请免费注册,如何做网站将数据上传组件缓存 keep-alive 文章目录 组件缓存 keep-alive一、keep-alive是什么二、keep-alive优点三、问题四、解决方案五、代码示例 六、回顾一下钩子七、总结 一、keep-alive是什么
keep-alive是Vue中的一个内置组件#xff0c;会缓存不活动的组件实例。并不会销毁组件#xff…组件缓存 keep-alive 文章目录 组件缓存 keep-alive一、keep-alive是什么二、keep-alive优点三、问题四、解决方案五、代码示例 六、回顾一下钩子七、总结 一、keep-alive是什么
keep-alive是Vue中的一个内置组件会缓存不活动的组件实例。并不会销毁组件导致重新回到这个页面的时候重新加载。keep-alive不会渲染DOM元素。 二、keep-alive优点 其目的就是为了防止重复渲染DOM减少加载时间以及性能的消耗。能够提高用户的体验。 三、问题
包裹了 keep-alive 一级路由都会被缓存
templatekeep-alive//谁往这里出我就缓存谁router-view/router-view/keep-alive
/template四、解决方案
① include 组件名数组只有匹配的组件会被缓存 ② exclude组件名数组任何匹配的组件都不会被缓存 ③ max 最多可以缓存多少组件实例
注意这里的组件名指的是name: 组件名 如果没有自己配置组件名那么才会是文件名。 需求如果有两个组件Layout组件 和 Deteil组件 我只想缓存Layout组件
五、代码示例
添加 属性 include“组件名数组”
keep-alive :includekeepArrrouter-view路由出口/router-view
/keep-alive我们还可以配置组件名数组需要缓存多个的时候
data () {return {keepArr: [Layout]}
}经过缓存后通过include属性缓存了Layout组件而Deteil组件未被缓存。
被缓存的会多两个生命周期钩子
actived 激活时组件被看到时触发deactived 失活时离开页面组件看不见触发 六、回顾一下钩子
组件缓存了就不会执行组件的created mounted 和 destroyed钩子所以组件缓存会给我们提供两个钩子 actived 和 deactived
created () {console.log(created 组件被加载了)
},
monted () {console.log(monted DOM渲染完了)
},
destroyed () {console.log(destroyed 组件被销毁了)
},activated () {alert(返回首页)console.log(activated 组件被激活了看到页面了)
},
deacivated () {console.log(deacivated 组件被失活了离开页面了)
}七、总结
keep-alive是什么
Vue内置的组件包裹动态组件可以缓存组件
keep-alive有点
组件切换过程中 把切换出去的组件保留在内存中提升性能
keep-alive的三个属性
include 组件名数组只要匹配的都缓存exclude 组件名数组 任何匹配的组件都不会被缓存max 最多可以缓存多少个组件
keep-alive的使用会触发那两个生命周期钩子函数
activated 当组件激活的时候触发该函数 → 进入页面触发deactivated 当组件不被使用的时候触发该函数 → 离开页面触发
