91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue程序化的事件監聽器(實例方案詳解)

發布時間:2020-10-21 12:46:46 來源:腳本之家 閱讀:115 作者:mrr 欄目:web開發

 某些第三方插件必須在當前組件卸載后清除該實例(比如說百度的富文本框UEditor 如果不清除再次在下個組件使用時會有bug, 類似于小程序的語音實例,必須離開頁面的時候銷毀當前語音實例,不然語音會一直播放)

方案1:

data() {      
  return {               
    timer: null // 定時器名稱     
  }    
},

然后這樣使用定時器:

this.timer = setIterval (() => {
  // 某些操作
}, 1000

最后在beforeDestroy()生命周期內清除定時器:

beforeDestroy() {
  clearInterval(this.timer);    
  this.timer = null;
}

這次方案有兩點不好的地方,引用尤大的話來說就是:

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

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

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

簡單來說就是把所有創建實例和需要銷毀的實例代碼放在一起了,放在一起而已(創建實例和銷毀實例)……..

甚至可以在一個頁面開啟多個這種創建實例和銷毀實例

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程序化的事件監聽器,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

蓬莱市| 修武县| 盐津县| 崇义县| 泽州县| 石林| 贵南县| 石棉县| 黄浦区| 资讯| 天镇县| 阿克陶县| 山丹县| 东安县| 无极县| 南和县| 信宜市| 冀州市| 蓬莱市| 黄陵县| 黄浦区| 湖南省| 景泰县| 樟树市| 雷山县| 柞水县| 张家川| 邵阳市| 和平县| 任丘市| 陇南市| 江川县| 醴陵市| 长治县| 清水县| 长垣县| 满洲里市| 两当县| 新宁县| 沅江市| 武清区|