美文网首页
vue中keep-alive的理解

vue中keep-alive的理解

作者: 欢宝吖_ | 来源:发表于2022-11-11 17:29 被阅读0次

概念

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

作用

在组件切换过程中将状态保留在内存中,也就是将不活动的组件的内容进行一个缓存,当组件再次被使用时,之前的内容数据不会消失。防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性

属性

属性名 属性值 说明
include 字符串或者正则表达式 只有与属性值匹配的组件才会被缓存
exclude 字符串或者正则表达式 除了与属性值匹配的之外的组件才会被缓存,与属性值匹配的组件不会被缓存
max 数字 最多可以缓存多少个组件实例

生命周期函数

  • actived

在keep-alive组件被使用时触发actived函数

进入页面获取最新数据时可以在该函数阶段获取数据,相当于created函数的作用

  • deactived

在keep-alive组件被停用,切换到其他组件时触发deactived函数

案例

  • 1、先创建几个切换的路由,将视图用keep-alive组件报包裹起来
keep-alive1.png
  • 2、将每个组件取名
keep-alive2.png
  • 3、keep-alive组件不填属性时,表示所有的组件里的数据都会被缓存
keep-alive3.png
  • 4、keep-alive组件使用include属性时,表示只有当组件名称为login的组件的数据才会被缓存,其他组件的数据不会被缓存
keep-alive4.png
  • 5、keep-alive组件使用exclude属性时,表示只有当组件名称为login的组件的数据不会被缓存,其他组件的数据才会被缓存
keep-alive5.png
  • 6、keep-alive组件使用max属性时,最大可以缓存的组件数量
keep-alive6.png

相关文章

网友评论

      本文标题:vue中keep-alive的理解

      本文链接:https://www.haomeiwen.com/subject/bihqxdtx.html