refactor(plugin-docsearch): introduce vueuse package (#1271)

ecosystem/plugin-docsearch/package.json

@@ -44,6 +44,7 @@
     "@vuepress/core": "workspace:*",
     "@vuepress/shared": "workspace:*",
     "@vuepress/utils": "workspace:*",
+    "@vueuse/core": "^9.13.0",
     "ts-debounce": "^4.0.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

ecosystem/plugin-docsearch/src/client/composables/useDocsearchHotkeyListener.ts

@@ -1,16 +1,14 @@
-import { onMounted, onUnmounted } from 'vue'
+import { useEventListener } from '@vueuse/core'
 
 /**
  * Add hotkey listener, remove it after triggered
  */
 export const useDocsearchHotkeyListener = (callback: () => void): void => {
-  const hotkeyListener = (event: KeyboardEvent): void => {
+  const remove = useEventListener('keydown', (event) => {
     if (event.key === 'k' && (event.ctrlKey || event.metaKey)) {
       event.preventDefault()
-      window.removeEventListener('keydown', hotkeyListener)
       callback()
+      remove()
     }
-  }
-  onMounted(() => window.addEventListener('keydown', hotkeyListener))
-  onUnmounted(() => window.removeEventListener('keydown', hotkeyListener))
+  })
 }