vueインスタンスを使用したより良いリスニングイベント

vueインスタンスを使用したより良いリスニングイベント
⭐10.より多くの先端技術と知識点、サブスクリプション番号の検索JS 購読
この記事では、vueでブラウザイベントをよりよく監視する方法を例に挙げます.原文では、イベントを個別に傍受するvueインスタンスを追加する方法を紹介します.このようにコードの書くのは比較的に簡潔で、管理しやすいです.
次のイベントをリスニングする従来の方法は、次のとおりです.

window.scrollX

window.scrollY

window.innerHeight

window.innerWidth

通常、多くのコードを書く必要があります.

created () {
  this.$el.addEventListener('click', this.someMethod)
},
destroyed () {
  this.$el.removeEventListener('click', () => this.someMethod)
}

より良い方法は、新しいVueインスタンスを使用することです.

import Vue from 'vue'

const WindowInstanceMap = new Vue({
  data() {
    return {
      scrollY: 0
    }
  },
  created() {
    window.addEventListener('scroll', e => {
      this.scrollY = window.scrollY
    })
  },
})

export default WindowInstanceMap

次に、プロジェクトで使用します.

// AppNav.vue
import WindowInstanceMap from './WindowInstanceMap.js'
export default {
  computed: {
    scrollY () { return WindowInstanceMap.scrollY },
    isCollapsed () {
      return this.scrollY < 100
    }
  }
}

このようなメリットは、

dev-toolのレイアウト表示変動情報

を大量に占有することはない.

主な項目のコードを減らす

dev-toolはマルチインスタンスのデバッグをサポートしていないため、このコードの一部を単純に維持する必要がある

.
最後に効果を見てみましょう.
この記事を参照:Reactive Window Parameters in VueJSは原文を読んで詳細を見ることができます.
私の購読番号に注目して、不定期にJSに関する技術文章を送って、技術だけを話してゴシップを話さないでください.