Svelte - on:event 监听器移除

Question

我想知道是否将undefined分配给元素的事件，即on:mousemove是否像removeEventListener一样防止 memory 泄漏，或者至少从长远来看不应该是一个问题。 我已经在 chrome 上使用getEventListeners进行了检查，它与on:mousemove方法一起使用，但我不确定我是否应该担心这一点并使用自定义操作的更冗长的方法。

我在容器中有一个下拉列表。 将鼠标移到容器上时，我想更改下拉列表的 position。

我最初的方法是编写一个自定义 use:containerMouseMove 操作，它将 Dropdown 的可见作为依赖项，并在 Dropdown 变得不可见时从容器中删除事件侦听器。

下拉列表.svelte：

        use:mousemoveContainer={{ container, destroyOn: !visible }}
        on:mousemove_container={(e) => {
            if (mouseTrack) {
                [x, y] = calcCoordinates(e, container);
            }
        }}

动作定义：

type Deps = { container: HTMLElement; destroyOn: boolean };

export const mousemoveContainer = (node: HTMLDivElement, deps: Deps) => {
    const handleMouseMove = (e: MouseEvent) => {
        node.dispatchEvent(new CustomEvent('mousemove_container', { detail: e }));
    };
    return {
        update(deps: Deps) {
            if (!deps.destroyOn) {
                deps.container.addEventListener('mousemove', handleMouseMove);
            }
            if (deps.destroyOn) {
                deps.container.removeEventListener('mousemove', handleMouseMove);
            }
        }
    };
};

然后我了解了 export const function 作为父子之间通信的一种方式，它简化了代码。 但我不确定现在是否没有 memory 泄漏。

    on:mousemove={dropdown.getVisible() ? dropdown.onContainerMouseMove : undefined}

onContainerMouseMove是on:mousemove_container里面的回调。

Answer 1

on:event监听器在组件卸载时自动移除。

在操作中，应该返回一个带有destroy() function 的 object 并取消订阅那里的事件。 当带有操作的元素被移除时，将调用 function。