keep-alive

keep-alive是什么

keep-alive是vue的内置组件,用于包裹动态组件,当动态组件不活动时,并不会销毁而是保存它。

它自身不会渲染成一个dom组件,也不会存在父组件链中。

作用

当切换组件时,被切换的组件会缓存在内存中,并不是销毁,防止重复渲染,减少了时间和性能消耗,提升了用户的体验性

参数

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例

使用keep-alive之后会生成两个钩子函数

activated(在组件激活时调用)和deactivated(在组件切换时调用)

比如正常情况下我在一个商城页面的首页中间的部分跳到列表页,我如果想返回首页,那么我会直接回到顶部去。如果我用keep-alive包裹组件的话,在组件离开首页的时候,获取到scroll-top的值并把它保留下来,在回到首页的时候,给首页附上保留的值,那么我返回的时候就能回到离开时的位置

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值