vueuse/core : 組合式API常用復用邏輯的集合

1.組件數據懶加載--到可視區域再發請求（vue3）

關鍵：如何判斷組件進入視口---useIntersectionObserver 

技術方案：

我們可以使用 @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是否進入視口區域的監聽會一直進行不會只監聽一次
*/

    const hot = ref(null)
    const { stop } = useIntersectionObserver(
      hot,
      ([{ isIntersecting }]) => {
        console.log('監控回調函數：', isIntersecting)
        if (isIntersecting) {
          console.log('進入可視區了，發請求')
          // 按需
          getGoods()
          // 注意：發送完，立即關閉監聽=》避免多次發送
          // 關閉監控
          stop()
        }
      }
    )

 

2.吸頂效果實現

關鍵---獲取頁面滾動高度---所用函數：useWindowScroll

 

 

1 import { useWindowScroll } from '@vueuse/core'
2 setup () {
3   // y表示具體頂部的滾動距離 會動態更新
4     const { y } = useWindowScroll() 5 return { y } 6 }