關鍵：如何判斷元件進入視口

技術方案：

我們可以使用 @vueuse/core 中的 useIntersectionObserver 來實現監聽元件進入可視區域行為，需要配合vue3.0的組合API的方式才能實現

連結：https://vueuse.org/core/useIntersectionObserver/

步驟：

• 1. 通過ref獲取要監控的元素或元件

• 2. 呼叫useIntersectionObserver(要監控的元素DOM物件或元件例項, 監控的回撥函式)=》多次觸發

• 說明：監控函式執行完，可以解構出stop方法=》停止監控

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) 
 
=> {
    targetIsVisible.value = isIntersecting
  }
)
/*
  1.stop 一個可執行的函式用來停止監聽行為
  2.target 一個由ref api呼叫之後形成的RefImpl物件 也可以是一個dom物件
  3.isIntersecting 一個型別為布林值的資料 當被監聽元素進入視口區域時為true,離開視口區域時為false
  特別注意: 對於目標target是否進入視口區域的監聽會一直進行不會只監聽一次
*/