useAutoUpdate

自动更新监听 Hook，监听窗口 resize 和 scroll 事件，自动触发更新回调。

前置依赖

依赖参数

参数名	类型	说明
deps.addEventListener	Window['addEventListener']	添加事件监听器
deps.removeEventListener	Window['removeEventListener']	移除事件监听器
deps.setTimeout	typeof setTimeout	设置定时器
deps.clearTimeout	typeof clearTimeout	清除定时器
deps.now	() => number	获取当前时间戳
deps.watch	VueCompositionAPI['watch']	Vue watch 函数

环境要求

• Vue 3: 需要 Vue 3 的 watch API
• 浏览器环境: 使用 Window 对象的事件监听 API 和定时器 API

npm install vue

函数签名

function useAutoUpdate(
  options: UseAutoUpdateOptions,
  deps: UseAutoUpdateDeps
): UseAutoUpdateReturn

interface UseAutoUpdateOptions {
  state: State
  update: () => void
  throttleMs?: number
}

interface State {
  visible: boolean | Ref<boolean>
}

interface UseAutoUpdateDeps extends CreateThrottledEventListenerDeps {
  watch: VueCompositionAPI['watch']
}

interface UseAutoUpdateReturn {
  destroy: () => void
}

参数

参数名	类型	必填	说明
options.state	State	是	包含 visible 属性的状态对象
options.update	() => void	是	更新回调函数
options.throttleMs	number	否	节流时间（毫秒），默认为 0
deps	UseAutoUpdateDeps	是	环境依赖

返回值

类型	说明
UseAutoUpdateReturn	包含 destroy 方法的对象

返回对象包含：

• destroy: 销毁监听器的函数

工作原理

1. 监听 state.visible 的变化
2. 当 visible 为 true 时，自动添加 resize 和 scroll 事件监听器
3. 监听器触发时调用 update 回调函数
4. 当 visible 为 false 时，自动移除所有监听器
5. 调用 destroy() 可以手动清理所有监听器

该 Hook 内部使用 createThrottledEventListener 函数来创建带节流功能的事件监听器，有效控制事件触发频率。

使用示例

import { reactive, watch } from 'vue'
import { useAutoUpdate } from 'zcw-shared/vue-hooks/dom/useAutoUpdate'

// 创建响应式 state 对象
const state = reactive({
  visible: false
})

const { destroy } = useAutoUpdate(
  {
    state,  // 直接传递响应式对象
    update: () => {
      console.log('位置需要更新')
      // 更新弹出层位置的逻辑
    },
    throttleMs: 100
  },
  {
    addEventListener: window.addEventListener.bind(window),
    removeEventListener: window.removeEventListener.bind(window),
    setTimeout: window.setTimeout.bind(window),
    clearTimeout: window.clearTimeout.bind(window),
    now: () => Date.now(),
    watch
  }
)

// 显示弹出层，自动开始监听
state.visible = true

// 隐藏弹出层，自动停止监听
state.visible = false

// 组件卸载时清理
onUnmounted(() => {
  destroy()
})