Vue2监听事件

<template>
  <div>Vue2监听事件</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    listenEsc(e) {
      if (e.keyCode == 27) {
        console.log("Esc执行");
      }
    },
  },
  mounted() {
    document.addEventListener("keydown", this.listenEsc);
  },
  
  beforeDestroy() {
    // 页面销毁的时候清除监听事件
    document.removeEventListener("keydown", this.listenEsc);
  },
};
</script>

Vue3监听事件 

<template><div>Vue3监听事件</div></template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";

const listenEsc = (e: any) => {
  if (e.keyCode == 27) {
    console.log("Esc执行");
  }
};

onMounted(() => {
  document.addEventListener("keydown", listenEsc);
});

onUnmounted(() => {
  // 页面销毁的时候清除监听事件
  document.removeEventListener("keydown", listenEsc);
});

</script>