淺談vue 組件中的setInterval方法和window的不同
vue組件中,this指向?qū)嵗?,【實例中重寫了setInterval等一整套方法】。所以,千萬不能和 window 下掛載的方法混用
具體不同在于,window.setInterval執(zhí)行完比后返回一個id,而vue實例中返回【定時器對象】,當然該對象中包含一個_id的私有屬性
因為 clearInterval 方法參數(shù)是id,所以最佳實踐是統(tǒng)一使用 window 的方法,不要使用 vue組件的方法
vue中的定時器方法,要使用箭頭函數(shù),不要出現(xiàn) const that = this 的寫法
//正確的用法mounted() { // 如果不加 window ,則會使用 vue實例的方法,將無法清除定時器 this.timer = window.setInterval(() => { this.date = new Date(); }, 2000); console.log(this.timer);//number},methods: { clearTimer() { window.clearInterval(this.timer); this.timer = null; }}
補充知識:vue 切換頁面 setInterval
vue 是單頁面應用,路由切換后,定時器并不會自動關(guān)閉,需要手動清除,當頁面被銷毀時,清除定時器即可。
mounted(){ clearInterval(this.timer); this.setTimer(); }, destroyed(){ clearInterval(this.timer) }
以上這篇淺談vue 組件中的setInterval方法和window的不同就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP基礎知識VBScript基本元素講解2. Python 利用Entrez庫篩選下載PubMed文獻摘要的示例3. Python 合并拼接字符串的方法4. Python 制作查詢商品歷史價格的小工具5. Python 如何調(diào)試程序崩潰錯誤6. Python sublime安裝及配置過程詳解7. python使用jenkins發(fā)送企業(yè)微信通知的實現(xiàn)8. Linux刪除系統(tǒng)自帶版本Python過程詳解9. ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條10. Python3 json模塊之編碼解碼方法講解

網(wǎng)公網(wǎng)安備