如何在 NuxtJS 中同時使用 props 和mounted()？

Question

我是 NuxtJS 的新手，我想在我的頁面上使用的特定組件上使用window.addEventListener ，但在我們更改頁面時也要刪除該事件。

在 React 中，我會做這樣的事情：

export default function MyComponent({ close }) {
  useEffect(() => {
    const handleKey = (e) => console.log(e.key);
    window.addEventListener("keyup", handleKey);
    return () => window.removeEventListener("keyup", handleKey);
  });

  return <div />
}

但是，如何使用 NuxtJS 3 執行相同的行為？

<script setup lang="ts">
interface ComponentProps { close: () => void; }
const props = defineProps<ComponentProps>();

// I want to use `window.addEventListener("keyup", props.close)`;
// I'd do something like this:
if (process.client) {
  window.addEventListener("keyup", props.close);
}
</script>

<template>
  <div />
</template>

問題是如何在組件卸載后刪除事件？ 有一個更好的方法嗎？

Answer 1

特定於 DOM 的初始化的正確位置是掛載鈎子，這不需要process.client檢查，因為它只發生在客戶端。 它與未安裝的掛鈎鏡像。

最好強制回調在生命周期內保持不變，因為無意中更改道具會阻止事件偵聽器被刪除：

const { close } = props;

onMounted(() => {
  window.addEventListener("keyup", close);
})

onUnmounted(() => {
  window.removeEventListener("keyup", close);
})