在 <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>
中确保某个事件只执行一次,而无需手动添加和删除事件处理函数。