什么是动态组件,如何使用,以及 keep-alive 的作用

动态组件:让多个组件使用同一个挂载点,并动态进行切换。这就是动态组件

通过保留元素,动态的绑定它的 is 特性,可以实现动态组件

keep-alive:

包裹动态组件(组件)时,会缓存不活动的组件实例,而不是销毁它们组件,切换调用的时候本身会被销毁掉的,只要加上keep-alive 进行包裹,就不会被销毁,而是被缓存起来,下一次使用的时候直接从缓存中调用
是一个抽象组件:它自身不会渲染一个 DOM 元素
常用的一些属性:

include:
类型:字符串或者正则表达式
解释:只有名称匹配的组件会被缓存

exclude:
类型:字符串或者正则表达式
解释:任何名称匹配的组件都不会被缓存

max:
类型:数字
解释:最多可以缓存多少组件实例
当使用了 keep-alive 内置组件后组件会增加哪两个生命周期函数?

(1)activated:当组件为活跃状态的时候触发(活跃状态:进入页面的时候)
(2)deactivated:缓存状态的时候触发

如果你需要在组件切换的时候,保存一些组件的状态防止多次渲染,就可以使用 keep-alive 组件包裹需要保存的组件。

对于 keep-alive 组件来说,它拥有两个独有的生命周期钩子函数,分别为 activated 和 deactivated 。
用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。
参考:https://www.jianshu.com/p/4b55d312d297

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值