在 <script setup>
中,你可以使用 onMounted
钩子函数来实现只执行一次的事件。onMounted
钩子函数会在组件挂载后立即执行,并且仅执行一次,因此适合用于只执行一次的事件处理。
以下是一个示例,演示了如何在 <script setup>
中使用 onMounted
钩子函数来实现只执行一次的事件处理:
<template>
<button @click="handleClick">点击我</button>
</template>
<script setup>
import { onMounted, ref } from 'vue';
// 定义事件处理函数
const handleClick = () => {
console.log('按钮被点击了');
};
// 使用 onMounted 钩子函数来执行事件绑定,确保只执行一次
onMounted(() => {
// 绑定点击事件处理函数
document.querySelector('button').addEventListener('click', handleClick);
});
</script>
在上述示例中,我们使用 onMounted
钩子函数在组件挂载后执行事件绑定操作,确保只执行一次。在 onMounted
钩子函数内部,我们可以进行事件绑定操作,例如通过 addEventListener
方法绑定点击事件处理函数。这样,点击事件处理函数将在组件挂载后执行一次,并且再也不会对该点击事件产生影响。
通过以上方法,你可以在 <script setup>
中确保某个事件只执行一次,而无需手动添加和删除事件处理函数。