使用 vue 實(shí)例更好的監(jiān)聽(tīng)事件及vue實(shí)例的方法

更新時(shí)間：2019年04月22日 09:51:03 作者：JS菌

這篇文章主要介紹了使用 vue 實(shí)例更好的監(jiān)聽(tīng)事件及vue實(shí)例的方法,介紹了一種新增 vue 實(shí)例的方法，單獨(dú)監(jiān)聽(tīng)事件，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

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

window.scrollX
window.scrollY
window.innerHeight
window.innerWidth

通常需要書(shū)寫(xiě)很多代碼：

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

更好的方式是使用新的 Vue 實(shí)例

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

然后在項(xiàng)目中使用：

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

這樣做的好處是：

不會(huì)大量占用 dev-tool 的版面顯示變動(dòng)信息
減少主要項(xiàng)目的代碼
因?yàn)?dev-tool 不支持多實(shí)例的調(diào)試，因此需要對(duì)這部分代碼保持簡(jiǎn)單

最后看看效果：

總結(jié)

以上所述是小編給大家介紹的使用 vue 實(shí)例更好的監(jiān)聽(tīng)事件及vue實(shí)例的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

Vue組件生命周期運(yùn)行原理解析
這篇文章主要介紹了Vue組件生命周期運(yùn)行原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
利用vue+elementUI設(shè)置省市縣三級(jí)聯(lián)動(dòng)下拉列表框的詳細(xì)過(guò)程
在做電商項(xiàng)目的時(shí)候需要添加修改收貨地址,如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)選取省市區(qū)地址困擾了我不少時(shí)間,這篇文章主要給大家介紹了關(guān)于利用vue+elementUI設(shè)置省市縣三級(jí)聯(lián)動(dòng)下拉列表框的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue后臺(tái)返回base64圖片無(wú)法顯示的解決
這篇文章主要介紹了vue后臺(tái)返回base64圖片無(wú)法顯示的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue 動(dòng)態(tài)樣式綁定 class/style的寫(xiě)法小結(jié)
這篇文章主要介紹了vue 動(dòng)態(tài)樣式綁定 class/style的寫(xiě)法小結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
Vue之過(guò)濾器詳解
這篇文章主要為大家介紹了Vue之過(guò)濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助,希望能夠給你帶來(lái)幫助
2021-11-11
vue 全局環(huán)境切換問(wèn)題
小編在開(kāi)發(fā)使經(jīng)常會(huì)碰到全局切換問(wèn)題，今天小編給大家?guī)?lái)一篇教程給大家介紹vue 全局環(huán)境切換問(wèn)題，感興趣的朋友一起看看吧
2019-10-10
vue實(shí)現(xiàn)單選和多選功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單選和多選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
vue vite之LogicFlow安裝核心依賴及項(xiàng)目初始化詳解
這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項(xiàng)目初始化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
Vue 使用高德地圖添加點(diǎn)標(biāo)記 + 點(diǎn)擊地圖獲取坐標(biāo) + 帶搜索(即地
這篇文章主要介紹了Vue 使用高德地圖添加點(diǎn)標(biāo)記 + 點(diǎn)擊地圖獲取坐標(biāo) + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-01-01