前端 - 为什么useWheel不能工作而v-wheel可以?

Question

我在vue3项目中使用了 '@vueuse/gesture' 的useWheel函数来帮助监听滚轮在一个元素上的滑动，但我发现指令能生效，而Composable的写法却不生效，无法触发wheelHandler回调。

我在调用useWheel之前也log了 workspaceArea.value是有值的，正常的。
是我的代码写的有问题吗？还是库的bug？

function wheelHandler ({ movement: [x, y], wheeling }) {  console.log(x); // 没打印}// Composable usageuseWheel(wheelHandler, {  domTarget: workspaceArea.value,})<div ref="workspaceArea"  v-wheel="wheelHandler"> // 指令有用，不加这个的话就无法打印

Answer 1

useWheel(wheelHandler, {
// domTarget: workspaceArea.value, <- 丢失响应式
domTarget: workspaceArea,
})

Answer 2

感觉像是注册时机的问题？ useWheel 函数放到 onMounted 里面再试试？

<template>  <!-- Directive usage -->  <div ref="demo" v-wheel="wheelHandler" /></template><script setup>const demo = ref()// Find more about `set()` on the "Motion Integration" pageconst wheelHandler = ({ movement: [x, y], wheeling }) => {  if (!wheeling) {    set({ x: 0, y: 0 })    return  }  set({ y, x })}// Composable usageuseWheel(wheelHandler, {  domTarget: demo,})</script>

• Wheel | @vueuse/gesture

Answer 3

useWheel 和 v-wheel 都是 @vueuse/gesture 库中提供的用于处理滚轮事件的工具，但它们的使用方式和场景有所不同。

useWheel 是一个 Composable 函数，它允许你以更灵活的方式在 Vue 组件中处理滚轮事件。然而，它不会自动将事件监听器附加到 DOM 元素上。你需要手动将返回的解除绑定函数与组件的生命周期钩子关联起来，以确保事件监听器在组件销毁时正确移除。

另一方面，v-wheel 是一个 Vue 指令，它会自动处理这些细节，并将事件监听器附加到绑定的 DOM 元素上。

如果 useWheel 没有按预期工作，而 v-wheel 正常工作，这可能是由于以下几个原因：

1. 事件监听器未正确绑定：在使用 useWheel 时，你需要确保返回的解除绑定函数在组件销毁时被调用。否则，可能会导致事件监听器未正确附加到 DOM 元素，或在组件销毁后仍然存在。
2. domTarget 引用问题：确保 workspaceArea.value 是一个有效的 DOM 元素引用。如果它未正确引用，useWheel 将无法将事件监听器附加到正确的元素上。
3. 库版本或用法问题：确保你使用的 @vueuse/gesture 库版本与你的 Vue 3 项目兼容，并且你按照文档中的说明正确使用了 useWheel。

下面是一个正确使用 useWheel 的例子，展示了如何将解除绑定函数与 Vue 组件的生命周期钩子关联：

<template>  <div ref="workspaceArea">    <!-- ... 其他内容 ... -->  </div></template><script>import { ref, onUnmounted } from 'vue';import { useWheel } from '@vueuse/gesture';export default {  setup() {    const workspaceArea = ref(null);    const { stop } = useWheel(      ({ movement: [x, y], wheeling }) => {        console.log(x);      },      {        domTarget: workspaceArea.value,      }    );    onUnmounted(stop); // 确保在组件销毁时停止监听    return {      workspaceArea,    };  },};</script>

在这个例子中，stop 函数是从 useWheel 返回的，它用于停止事件监听。我们使用 Vue 的 onUnmounted 钩子来确保在组件卸载时调用 stop 函数，从而避免内存泄漏。

如果上述方法仍然无法解决问题，可能需要进一步检查你的代码，或者考虑查看 @vueuse/gesture 的相关 issue，以确定是否为库的问题或特定环境下的bug。此外，查阅库的文档和更新日志也是一个好习惯，以了解是否有任何已知的兼容性问题或更新说明。