得到窗口的滚动距离,是响应式的
第一步:封装

// 1. 是一个函数
// 2. 有参数  没有
// 3. 返回值  对象 属性y
// 4. 通用逻辑 产出响应式的数据 ref类型
// 5. 初始值确定
import { ref } from 'vue'
export function useWindowScroll () {
  const y = ref(0)
  // 通用逻辑: 基于scroll事件得到当前距离顶部的滚动距离 然后返回
  window.addEventListener('scroll', () => {
    y.value = document.documentElement.scrollTop
  })
  return {
    y
  }
}

第二步:导出使用

import { useWindowScroll } from '@/compositions/useWindowScroll.js'
setup () {
    const { y } = useWindowScroll()
    // 这个打印会一直出来吗？
    console.log('当前滚动距离', y.value)
    return {
      y
    }
  }