文章舉例說明一下在 vue 中如何更好的監(jiān)聽瀏覽器事件。原文介紹了一種新增 vue 實例的方法，單獨監(jiān)聽事件。這樣代碼書寫較為簡練，容易管理。

創(chuàng)新互聯(lián)：于2013年創(chuàng)立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設”服務，為上千余家公司企業(yè)提供了專業(yè)的成都網(wǎng)站設計、網(wǎng)站制作、網(wǎng)頁設計和網(wǎng)站推廣服務， 按需求定制網(wǎng)站由設計師親自精心設計，設計的效果完全按照客戶的要求，并適當?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實際情況給出合理的網(wǎng)站構架，制作客戶同行業(yè)具有領先地位的。

當監(jiān)聽如下事件的傳統(tǒng)做法是：

• 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 不支持多實例的調(diào)試，因此需要對這部分代碼保持簡單

最后看看效果：

總結

以上所述是小編給大家介紹的使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！