Vue程序化的事件監(jiān)聽器(實例方案詳解)
某些第三方插件必須在當前組件卸載后清除該實例（比如說百度的富文本框UEditor 如果不清除再次在下個組件使用時會有bug， 類似于小程序的語音實例，必須離開頁面的時候銷毀當前語音實例，不然語音會一直播放）
方案1：
data() {
return {
timer: null // 定時器名稱
}
},
然后這樣使用定時器：
this.timer = setIterval (() => {
// 某些操作
}, 1000
最后在beforeDestroy()生命周期內清除定時器：
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
這次方案有兩點不好的地方，引用尤大的話來說就是：
(1)它需要在這個組件實例中保存這個數(shù)據(jù)timer，這是多余的。
(2)我們的建立定時器代碼獨立于我們的清理代碼（定時器需要卸載頁面的時候卸載），這使得我們比較難于程序化的清理我們建立的所有東西（意思是執(zhí)行代碼和清除代碼不在一起）。
方案2： 該方法是通過$once這個事件偵聽器器在定義完定時器之后的位置來清除定時器。以下是完整代碼：
mounted: function () {
const timer = setInterval(() =>{
// 某些定時器操作
}, 500);
// 通過$once來監(jiān)聽定時器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
}
簡單來說就是把所有創(chuàng)建實例和需要銷毀的實例代碼放在一起了，放在一起而已(創(chuàng)建實例和銷毀實例)……..
甚至可以在一個頁面開啟多個這種創(chuàng)建實例和銷毀實例
mounted: function () {
this.attachDatepicker('startDateInput')
this.attachDatepicker('endDateInput')
},
methods: {
attachDatepicker: function (refName) {
var picker = new Pikaday({
field: this.$refs[refName],
format: 'YYYY-MM-DD'
})
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
}
綜合來說，我們更推薦使用方案2，使得代碼可讀性更強，一目了然。如果不清楚 $once、$on、$off 的使用。
總結
以上所述是小編給大家介紹的Vue程序化的事件監(jiān)聽器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)登陸功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在瀏覽網(wǎng)頁時我們有些時候需要記住一些用戶選擇的信息,比如登陸時我們如果選擇了記住密碼,那么我們下次進入該網(wǎng)頁時就會有你上次的登陸信息,下面這篇文章主要給大家介紹了關于vuex存儲數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue數(shù)組動態(tài)刷新失敗問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue?cesium加載點與定位到指定位置的實現(xiàn)方法
Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導航等,這篇文章主要介紹了vue?cesium加載點與定位到指定位置,需要的朋友可以參考下2024-03-03
vue 對axios get pust put delete封裝的實例代碼
在本篇文章里我們給各位整理的是一篇關于vue 對axios get pust put delete封裝的實例代碼內容，有需要的朋友們可以參考下。2020-01-01
這篇文章主要給大家介紹了關于vue3點擊不同的菜單頁切換局部頁面實現(xiàn)的相關資料,文中示例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考價值,需要的朋友可以參考下2023-08-08
淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式
這篇文章主要介紹了淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
使用npm報了很多錯,做的事情就是把錯誤復制到百度上去搜索,看看哪個解決方案有效,下面這篇文章主要給大家介紹了關于npm打包失敗排查的全過程,需要的朋友可以參考下2022-11-11
詳解vue-cli快速構建項目以及引入bootstrap、jq
本篇文章主要介紹了vue-cli快速構建項目以及引入bootstrap、jq，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05