vue3异步组件 按需加载插件@vueuse/core

使用到了异步加载的组建@vueuse/core实现懒加载功能

1，安装@vueuse/core

//yarn 安装
yarn add @vueuse/core
//或者npm
npm install @vueuse/core

2.直接上例子

<script setup lang='ts'>
import A from './components/A.vue';
import B from './components/B.vue';

import { defineAsyncComponent, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core';

const C = defineAsyncComponent(() =>
  import('./components/C.vue')
)

const tar = ref(null)

const visabled = ref(false)

const {stop} = useIntersectionObserver(
    tar,
    ([{isIntersecting}]) =>{
        if(isIntersecting){
            visabled.value = isIntersecting
        }
    }
)

</script>
           
<template>
    <div>
        <A />
        <B />
        <div ref="tar">
            <C v-if="visabled" />
        </div>
    </div>
</template>
           
<style scoped lang='scss'>

</style>

记录一下