Vue3 composition API の windowイベントは App.vueの onMountedへ

Vue3のcompositionAPIを使っていて、使いなれた jQuery と比較して不便というか、思ったところに手が届かないと感じることがいくつかあります。

その一つは、DOM要素の直接的な扱いが難しいと感じる点です。
jQueryはそもそもDOMを操作する、DOM要素を柔軟に取得するという考えから発展した仕組みですので、当然のように様々な要素をすぐに扱うことができます。

jQueryの場合

例えば <div id=”foo”> にイベントリスナーを設置したければ

$( '#foo' ).on( 'click', (event)=>{
  // 処理
} )

のように書けますし、動的に生成されるような要素であれば

$( window ).on( '#foo1', 'click', (event) =>{
  // 処理
} )

の様に書けば、動的に生成、削除されるようなDOMの扱いもスムーズです。
同様に windowなどの要素も、上記と同じ書き方で扱えます。

$( window ).on( 'click', (event) =>{
  // 処理
} )

こんな感じです。

Vue Composition API の場合

jQuery はそこに存在するDOMの要素選択や操作を便利にすることが主目的なことに対してVue の Composition APIは、ドキュメントを生成することが主目的ですので、DOMの考え方がそもそも違います。ので、IDを指定するなどしてDOMの検索を行うより、タグにトリガーを書くほうが効率的です。

<q-btn v-on:click="foo" />
  :
  :
const foo = () => {
  // 処理
}

そこで困った！Windowイベントのリスナー設置

例えばファイルのドロップをさせたい場合など、Windowにリスナーを設置したい場合があります。
この書き方がいくら調べてもわかりませんでした。
そこで vue3-dropzone などの入れてみたのですが、ちょっと思った動作と違ったためどうしたものかと悩んでいたら…解決方法が単純でした。

App.vue の onMountede に普通に書く

という本当に単純な解決方法が一番早いようです。

<template>
</template>
<script>
import { onMounted } from 'vue'
export default {
  setup () {
    onMounted(()=>{
      window.addEventListener( 'drop',(event)=>{
        // event.stopPropagation()
        // event.preventDefault()
        // console.log()
      } )
    })
  }
</script>

こんな感じです。
ほぼ丸一日書けて調べたり代替手段を探したりしましたが、解決すると単純なものです。