如何在VueUse的show中绑定点击事件并在hide中解绑？

核心调整点 #

• 提升变量作用域：将unsubscribe变量声明在show和hide函数的外部，确保两个函数都能访问到这个解绑方法。
• 防止重复绑定：每次调用show时，先检查是否已有活跃的监听器，若有则先解绑再重新绑定，避免内存泄漏或多次触发。
• 安全解绑逻辑：在hide中先判断unsubscribe是否存在再调用，避免未绑定状态下执行解绑报错。

修改后的代码示例 #

// 在函数外部声明变量，确保show和hide都能访问
let unsubscribe;

async function show() {
    // 先解绑已存在的监听器，避免重复绑定
    if (unsubscribe) {
        unsubscribe();
    }
    
    active.value = true;
    // 重新绑定点击外部的监听器，更新unsubscribe变量
    unsubscribe = onClickOutside(menu, () => {
        if (active.value) {
            hide();
        }
    });

    await nextTick();
    activate();
}

function hide() {
    // 先判断是否存在解绑方法，避免报错
    if (unsubscribe) {
        unsubscribe();
        // 解绑后重置变量，避免重复调用
        unsubscribe = null;
    }
    
    active.value = false;
    deactivate();
}

关键说明 #

1. 顶层声明的unsubscribe可以在show和hide之间共享状态，确保解绑方法能被正确调用。
2. show中先解绑再绑定的逻辑，能避免用户多次点击显示按钮时，创建多个重复的事件监听器。
3. hide中解绑后重置unsubscribe为null，可以防止后续误调用已失效的解绑方法。

内容的提问来源于stack exchange，提问作者panthro