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