动态组件:
让多个组件使用一个挂载点,并动态进行切换,这就是动态组件。vue通过
保留<component></conponent>元素,通过动态绑定他的is特性来实现动态组件。
<component is"组件名"></conponent>
动态组件一般用于选项卡功能,一般选项卡切换比较频繁,如果频繁的创建销毁组件
有一点消耗浏览器的性能。若希望浏览器能够缓存我的组件,如此下次就不用重新
创建和销毁。为解决频繁创建和销毁的问题,vue提供内置组件<keep-alive></keep-alive>
通过包裹对应的组件实现。
keep-alive包裹时,会缓存不活动的组件实例而并不销毁他们。而组件切换调用的时候
本身会被销毁。加上Keep-alive包裹时就会被缓存,不会被销毁,下一次使用的时候直接
从缓存中调用。<keep-alive></keep-alive>是一个抽象组件,它自身不会渲染成一个dom元素。
<keep-alive>
<component :is='componetId'></component>
</keep-alive>
生命周期:
动态组件一般配合actived和deactivated两个生命周期使用
actived:keep-alive 缓存的组件激活时调用
deactivated:keep-alive 缓存的组件失活时调用
vue keep-alive动态组件的作用和新增的周期函数
最新推荐文章于 2024-04-11 01:50:49 发布