vue3+ts 实现按需加载“defineAsyncComponent”

主角 defineAsyncComponent和useIntersectionObserver

1.安装vuese

npm install @vueuse/core

2.将按需引入的插件引入

const userInfoCom = defineAsyncComponent(() =>
  import('./widgets/user_info.vue')
)
  
<div class="userInfo" >
      <userInfoCom></userInfoCom>
</div>

3. 默认不加载

  const isShow=ref(false);
<div class="userInfo"  >
      <userInfoCom v-if="isShow"></userInfoCom>
</div>

4.设置显示的条件

const isShow=ref(false);
const target=ref();
onMounted(() => {
   //延迟400ms
    setTimeout(()=>{
         useIntersectionObserver(target,([{isIntersecting}])=>{
            isShow.value=isIntersecting
        })
    },400)
});
<div class="userInfo"  ref="target">
      <userInfoCom v-if="isShow"></userInfoCom>
</div>