发 帖  
原厂入驻New
[问答]

vue中的keep-alive那些不得不知的知识点?

62 vue Keepalived
分享
2020-11-6 06:08:06   评论 分享淘帖 邀请回答
4个回答
作用
  主要用于保留组件状态或避免重新渲染。
2020-11-6 16:23:01 评论

举报

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

举报

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

  exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:
  <!-- 逗号分隔字符串 --> <keep-alive include=&quot;a,b&quot;>   <component :is=&quot;view&quot;></component> </keep-alive>  <!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include=&quot;/a|b/&quot;>   <component :is=&quot;view&quot;></component> </keep-alive>  <!-- 数组 (使用 `v-bind`) --> <keep-alive :include=&quot;[&#39;a&#39;, &#39;b&#39;]&quot;>   <component :is=&quot;view&quot;></component> </keep-alive>
  匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
2020-11-6 16:23:16 评论

举报

max
  max - 数字。最多可以缓存多少组件实例。
  一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
  <keep-alive :max=&quot;10&quot;>   <component :is=&quot;view&quot;></component> </keep-alive>
2020-11-6 16:23:23 评论

举报

撰写答案

你正在撰写答案

如果你是对答案或其他答案精选点评或询问,请使用“评论”功能。

高级模式
您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
我要提问
关闭

站长推荐 上一条 /9 下一条

快速回复 返回顶部 返回列表