动态组件
组件使用
<component v-bind:is=""></component>
、
is属性接收参数为:
- 已注册组件的名字
- 一个组件的选项对象
component标签可以当作组件的挂载点,我们可以通过修改is
属性的值动态切换显示的组件,比如实现一个选项卡类型的功能。
缓存动态组件
如果需要将切换的组件缓存,可以使用keep-alive包裹component标签
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
异步组件
官网说明:
在开发大型项目的时候,我们会把大型项目根据组件分割为小块代码,然后异步加载代码块,这样可以让首屏部分代码块优先加载,加快首屏渲染速度,其他代码块在需要的时候再加载,加载过的代码块会被缓存起来,以便复用重新渲染。
比如:有些组件不会在第一次进入首屏时加载,而是当执行了某些操作时,才会加载进来,所以此时,我们可以将该组件设置成异步加载,什么时候用,什么时候再加载进来,以达到提升首屏性能的目的。
异步组件使用方法:
components: {
组件name: () => import ('组件url');
}
有点像路由的懒加载。
扫描二维码关注公众号,回复:
12597945 查看本文章
如果不使用异步组件,那么不管你有没有操作,它都会先加载进来,这样就比较耗费性能。
如:写一个组件,当点击按钮后才让组件加载显示,当设置成异步加载时。
<template>
<div class="home">
<A v-if="show"></A>
<B v-if="show"></B>
<button @click="show=!show">切换</button>
</div>
</template>
<script>
export default {
components:{
A:()=>import ('../components/a'), //A组件内容,我是异步加载的A组件
B:()=>import ('../components/b') //B组件内容,我是异步加载的B组件
},
data () {
return {
show:false
}
},
mounted () {
},
methods: {
},
}
</script>
你可以在network中试验,使用ctrl+f查找组件中的文字;
会发现组件没有出现时,无法查找到内容;、
当我们点击按钮后
组件出现,network中多加载了一个js文件,可以搜索到A,B组件中的内容。
并且多次切换不会重复加载。
性能更好!
高级异步组件:
const asyncComponent = () => ({
component: './my-async-component',
delay: 200, // 延迟加载,默认200毫秒
error: errorComponent, // 加载失败显示组件
loading: loadingComponent, // 加载时使用组件
timeout: 2000 // 超时时间,默认 Infinity
})