动态组件,异步组件,组件存活

1. 我们在使用vue的时候难免会遇到一些需要频繁切换组件的时候,然而可能我们使用的比较万能的方式就是通过v-if,v-else-if,v-else等等来实现组件之间的切换,又或者说大家知道v-if会使得组件切换之后需要重新卸载和挂载,这就导致一定的性能消耗,然而大家可能会想到使用v-show的方式来进行切换,这必然是一个好的方式。
2.但是呢,当我们使用v-show的时候去做组件切换的时候就会需要很多条件去限制,然后这个时候vue内部给我们提供了一个compoent组件的方式,然后这个compoent组件可以通过<compoent :is="xxx">的方式来制定渲染啥子组件,这也就是动态组件的切换,然而这个方式也会导致重新卸载和挂载,所以需要用到<keep-alive/>组件将component组件进行包裹,这个时候呢当通过is条件来控制组件动态切换的时候就不会重复的挂载了,同时也避免了v-if或者v-show那种多个条件的限制。
3.大家继续想,我们在使用动态组件的时候是否会刚进入页面的时候就会把所有的组件加载出来呢,对的,这就会导致首次进入的时候出现性能问题,但是其实我们可以避免这个问题,就比如说其实你再切换另外一个动态组件之前的时候,你是不需要加载另外一个组件的对吧,这个时候你可以使用vue内置的方法defineAsyncComponent方法,来异步加载组件或者说是懒加载的方式来实现优化,使用方法也很简单,只需要将对应需要异步加载的组件的mport语法改为defineAsyncCompoent(()=>{import ('xxxx')})的方式就可以达到效果。


其实很多时候,vue会内置一些比较好的语法,其实想法也很简单合理,我们只是不知道,不熟悉,以后如果有啥很多小的细节我尽量都会发一篇csdn。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值