<template>
  <div class="A">
    <A></A>
  </div>
  <div class="B">
    <B></B>
  </div>
  <div>
    <C></C>
  </div>
</template>
 
<script setup>
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
 
</script>

<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/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 target = ref(null)              //獲取需要操作的dom元素
const targetIsVisible = ref(false)   //定義一個dom元素顯示與隱藏開關(guān)
 
const { stop } = useIntersectionObserver(       //定義一個函數(shù)用于控制
  target,
  ([{ isIntersecting }]) => {                 //這里的isIntersecting表示的是dom元素是否進入視窗，值為true或flase
    console.log(isIntersecting);
    if (isIntersecting) {
      targetIsVisible.value = isIntersecting     //將isIntersecting賦值給開關(guān)，即表示進入視窗就顯示該dom元素
    }
  },
)
 
</script>