动态组件
<component :is="currentTabComponent"></component>
注意:Vue2 的时候 is 是通过组件名称切换的;在 Vue3 setup 是通过组件实例切换的
使用场景:tab切换
示例:
<template>
<div>
<span @click="onChange('1')">A</span>
<span @click="onChange('2')">B</span>
</div>
<component :is="view"></component>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import A from './A.vue'
import B from './B.vue'
const obj: { [key: string]: typeof A | typeof B } = {
'1': A,
'2': B,
}
const type = ref('1')
const view: A | B = computed(() => obj[type.value])
const onChange = (val: string) => {
type.value = val
}
</script>
A.vue
<template>
<p>A</p>
</template>
B.vue
<template>
<p>A</p>
</template>
组件实例放到reactive
<template>
<div>
<span @click="onChange('1')">one</span>
|
<span @click="onChange('2')">two</span>
</div>
<component :is="view"></component>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import A from './A.vue'
import B from './B.vue'
// 组件实例放到reactive
const obj: { [key: string]: typeof A | typeof B } = reactive({
'1': A,
'2': B,
})
const type = ref('1')
const view = computed(() => obj[type.value])
const onChange = (val: string) => {
type.value = val
}
</script>
如果你把组件实例放到 Reactive 中,Vue会给你一个警告
这是因为 reactive 会进行proxy 代理,而我们组件代理之后毫无用处。
为了节省性能开销,推荐我们使用 shallowRef 或者 markRaw 跳过 proxy 代理。
const obj: { [key: string]: typeof A | typeof B } = reactive({
'1': markRaw(A),
'2': markRaw(B),
})
或
const obj = shallowReactive<{ [key: string]: typeof A | typeof B }>({
'1': A,
'2': B,
})
或
const obj = shallowRef<{ [key: string]: typeof A | typeof B }>({
'1': A,
'2': B,
})
const view = computed(() => obj.value[type.value])
缓存组件
有时候希望组件实例在它们第一次被创建的时候缓存下来,可以使用keep-alive
内置组件将组件包裹起来。
缓存全部组件
<keep-alive>
<router-view />
</keep-alive>
include 只缓存某些组件,其余不缓存
<template>
<button @click="onChange">切换组件</button>
<keep-alive :include="['A']">
<component :is="obj[comp]"></component>
</keep-alive>
</template>
<script setup lang="ts">
import A from './A.vue'
import B from './B.vue'
const comp = ref('A')
const obj: { [key: string]: typeof A | typeof B } = {
A: A,
B: B,
}
const onChange = () => {
comp.value = comp.value === 'A' ? 'B' : 'A'
console.log('当前keep-alive组件:', comp.value)
}
</script>
exclude 只排除某些不缓存,其余都缓存
<template>
<button @click="onChange">切换组件</button>
<keep-alive :exclude="['A']">
<component :is="obj[comp]"></component>
</keep-alive>
</template>
<script setup lang="ts">
import A from './A.vue'
import B from './B.vue'
const comp = ref('A')
const obj: { [key: string]: typeof A | typeof B } = {
A: A,
B: B,
}
const onChange = () => {
comp.value = comp.value === 'A' ? 'B' : 'A'
console.log('当前keep-alive组件:', comp.value)
}
</script>
max 缓存最大数
超过设定值则去老留新
<template>
<keep-alive :max="2">
<component :is="obj[comp]"></component>
</keep-alive>
</template>
生命周期 activated、deactivated
export default {
// 被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
activated() {},
// 被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。
deactivated() {},
};
注意:被 keep-alive 组件的生命周期 onMounted 和 onUnmounted 只会被调用一次。
示例:
<template>
<button @click="isShow = !isShow">{{ isShow ? '隐藏' : '显示' }}keep-alive</button>
<button @click="onChange">切换组件</button>
<keep-alive v-if="isShow">
<component :is="obj[comp]"></component>
</keep-alive>
</template>
<script setup lang="ts">
import A from './A.vue'
import B from './B.vue'
const isShow = ref(false)
const comp = ref('A')
const obj: { [key: string]: typeof A | typeof B } = {
A: A,
B: B,
}
const onChange = () => {
comp.value = comp.value === 'A' ? 'B' : 'A'
console.log('当前keep-alive组件:', comp.value)
}
</script>
A.vue
<template>
<p>A</p>
<input type="text" v-model="message" />
</template>
<script setup lang="ts">
const message = ref('')
onMounted(() => {
console.log('A 组件 === mounted')
})
onActivated(() => {
console.log('A 组件 === onActivated')
})
onDeactivated(() => {
console.log('A 组件 === onDeactivated')
})
onUnmounted(() => {
console.log('A 组件 === onUnmounted')
})
</script>
B.vue
<template>
<p>B</p>
<input type="text" v-model="message" />
</template>
<script setup lang="ts">
const message = ref('')
</script>
异步组件
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
const Banner = defineAsyncComponent(() => import('./components/Banner.vue'))
</script>
加载与错误状态
异步操作不可避免地会涉及到加载和错误状态:
const AsyncComp = defineAsyncComponent({
// 加载函数
loader: () => import('./components/Banner.vue'),
// 加载异步组件时使用的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间,默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个 timeout 时间限制,并超时了
// 也会显示这里配置的报错组件,默认值是:Infinity
timeout: 3000
})
如果提供了一个加载组件,它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时,加载完成得很快,加载组件和最终组件之间的替换太快可能产生闪烁,反而影响用户感受。
如果提供了一个报错组件,则它会在加载器函数返回的 Promise 抛错时被渲染。你还可以指定一个超时时间,在请求耗时超过指定时间时也会渲染报错组件。
结合 Suspense 内置组件 (Vue3 新增)
使用场景:骨架屏
优点:
- 实现异步加载组件
- 实现 build 组件分包,常用于首屏加载。如果使用同步会导致 build 出来的包大,使用 异步组件 可以将包分割出来
<template>
<Suspense>
<template #default>
<Banner></Banner>
</template>
<template #fallback>
<LoadingComponent></LoadingComponent>
</template>
</Suspense>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import LoadingComponent from './components/LoadingComponent.vue'
const Banner = defineAsyncComponent(() => import('./components/Banner.vue'))
</script>