动态组件/异步组件

动态组件(component)

官网链接

Vue 本身提供了一个内置的 <component> 组件，该组件专门就是用来实现动态组件的渲染。
有些场景会需要在两个组件间来回切换，比如 Tab 界面：
对应内容比较多使用

组件1/2

主页面

<template>
  <div>
    <li v-for="(item, index) in tabList" :key="index" @click="change(index)">{{ item.name }}</li>
    <component :is="currentComponent.com"></component>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'//引入路由
import abount from '../components/about/index.vue'
import bcase from '../components/case/index.vue'
export default {
  name: '',
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({
      tabList: [
        { name: '显示组件A', com: abount },
        { name: '显示组件B', com: bcase },
      ],
      currentComponent: { com: abount },
      change(index) {
        data.currentComponent.com = data.tabList[index].com
      }
    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped></style>

异步组件(suspense)

方法实例

分别创建3个组件A B C

<template>
  <div class="A">
    <A></A>
  </div>
  <div class="B">
    <B></B>
  </div>
  <div ref="target">
    <C v-if="targetIsVisible"></C>
  </div>
</template>
<script setup>
import A from '../components/about/index.vue'
import B from '../components/case/index.vue'
import { defineAsyncComponent, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core'
const C = defineAsyncComponent(() =>
  //异步引入组件
  import('../components/house/index.vue'))
const target = ref(null)
// 获取需要操作的dom元素
const targetIsVisible = ref(false)
//定义一个dom元素显示与隐藏开关
const { stop } = useIntersectionObserver(
  //定义一个函数用于控制
  target,
  ([{ isIntersecting }]) => {
    //这里的isIntersecting表示的是dom元素是
    console.log(isIntersecting);
    if (isIntersecting) {
      targetIsVisible.value = isIntersecting
    }
  })
</script>

这样就实现了异步加载C组件，在页面视窗滚动到C组件时才会加载C组件。