以下是一个简单的例子，演示如何在 Vant 3 中使用 Composition API 监听事件：
<template>
<div>
<p>点击次数: {{ clickCount }}</p>
</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const clickCount = ref(0);
// 定义事件处理函数
const handleClick = () => {
clickCount.value += 1;
};
// 在组件挂载时添加事件监听器
onMounted(() => {
document.addEventListener('click', handleClick);
});
// 在组件卸载时移除事件监听器，防止内存泄漏
onUnmounted(() => {
document.removeEventListener('click', handleClick);
});
return {
clickCount,
};
},
};
</script>
在上述例子中，我们使用 ref 来创建一个响应式数据 clickCount，并在 onMounted 钩子中添加了一个点击事件监听器。当用户点击页面时，handleClick 函数会被调用，从而更新 clickCount。
同时，我们在 onUnmounted 钩子中移除了事件监听器，以防止在组件销毁时发生内存泄漏。
请注意，这是一种基础的事件监听方式。如果你有特定的需求，例如监听特定元素的事件，可以进一步调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5783/Vant