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。