• 售前

  • 售后

热门帖子
入门百科

vue keep-alive的简朴总结

[复制链接]
123457536 显示全部楼层 发表于 2021-10-25 19:53:41 |阅读模式 打印 上一主题 下一主题
一、作用


  重要用于保留组件状态或制止重新渲染。
二、用法


  <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
  <keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出如今组件的父组件链中。
  当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应实行。
三、Props


include


  include - 字符串或正则表达式。只著名称匹配的组件会被缓存。
exclude


  exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  include 和 exclude prop 答应组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表现:
  1. <!-- 逗号分隔字符串 -->
  2. <keep-alive include="a,b">
  3. <component :is="view"></component>
  4. </keep-alive>
  5. <!-- 正则表达式 (使用 `v-bind`) -->
  6. <keep-alive :include="/a|b/">
  7. <component :is="view"></component>
  8. </keep-alive>
  9. <!-- 数组 (使用 `v-bind`) -->
  10. <keep-alive :include="['a', 'b']">
  11. <component :is="view"></component>
  12. </keep-alive>
复制代码
  匹配起首查抄组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
max


  max - 数字。最多可以缓存多少组件实例。
  一旦这个数字到达了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
  1. <keep-alive :max="10">
  2. <component :is="view"></component>
  3. </keep-alive>
复制代码
以上就是浅析vue中的keep-alive的具体内容,更多关于vue中的keep-alive的资料请关注草根技能分享其它干系文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作