某些第三方插件必須在當(dāng)前組件卸載后清除該實(shí)例（比如說百度的富文本框UEditor 如果不清除再次在下個(gè)組件使用時(shí)會(huì)有bug， 類似于小程序的語音實(shí)例，必須離開頁(yè)面的時(shí)候銷毀當(dāng)前語音實(shí)例，不然語音會(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)不好的地方，引用尤大的話來說就是：

(1)它需要在這個(gè)組件實(shí)例中保存這個(gè)數(shù)據(jù)timer，這是多余的。
(2)我們的建立定時(shí)器代碼獨(dú)立于我們的清理代碼（定時(shí)器需要卸載頁(yè)面的時(shí)候卸載），這使得我們比較難于程序化的清理我們建立的所有東西（意思是執(zhí)行代碼和清除代碼不在一起）。

方案2： 該方法是通過$once這個(gè)事件偵聽器器在定義完定時(shí)器之后的位置來清除定時(shí)器。以下是完整代碼：

mounted: function () {
 const timer = setInterval(() =>{          
   // 某些定時(shí)器操作        
 }, 500);      
 // 通過$once來監(jiān)聽定時(shí)器，在beforeDestroy鉤子可以被清除。
 this.$once('hook:beforeDestroy', () => {      
   clearInterval(timer);                  
 })
}

簡(jiǎn)單來說就是把所有創(chuàng)建實(shí)例和需要銷毀的實(shí)例代碼放在一起了，放在一起而已(創(chuàng)建實(shí)例和銷毀實(shí)例)……..

甚至可以在一個(gè)頁(yè)面開啟多個(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()
  })
 }
}

綜合來說，我們更推薦使用方案2，使得代碼可讀性更強(qiáng)，一目了然。如果不清楚 $once、$on、$off 的使用。

總結(jié)

以上所述是小編給大家介紹的Vue程序化的事件監(jiān)聽器，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！