使用 vue 實例更好的監(jiān)聽事件及vue實例的方法
更新時間：2019年04月22日 09:51:03 作者：JS菌
這篇文章主要介紹了使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法，單獨監(jiān)聽事件，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
文章舉例說明一下在 vue 中如何更好的監(jiān)聽瀏覽器事件。原文介紹了一種新增 vue 實例的方法，單獨監(jiān)聽事件。這樣代碼書寫較為簡練，容易管理。
當監(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 不支持多實例的調試，因此需要對這部分代碼保持簡單
最后看看效果：
總結
以上所述是小編給大家介紹的使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue項目中如何調用多個不同的ip接口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue數組雙向綁定問題及$set用法說明，具有很好的參考價值，希望大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue3.0 自己實現放大鏡效果案例講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue請求函數和路由的安裝使用過程,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要為大家介紹了vue pdf二次封裝解決無法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vue開發(fā)網站的時候,往往圖標是起著很重要的作用,下面這篇文章主要給大家介紹了關于Vue3使用icon的兩種方式,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了Vue封裝一個簡單輕量的上傳文件組件的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue切換Tab動態(tài)渲染組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
下面小編就為大家?guī)硪黄獀ue-resource攔截器設置頭信息的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10