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

使用 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 的技術文章，只談技術不談八卦 😊