使用 vue 例項更好的監聽事件

⭐️ 更多前端技術和知識點，搜尋訂閱號 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 的技術文章，只談技術不談八卦 ?