淺談vue 組件中的setInterval方法和window的不同
更新時間：2020年07月30日 08:39:33 作者：龍旗飄揚的艦隊
這篇文章主要介紹了淺談vue 組件中的setInterval方法和window的不同，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue組件中，this指向?qū)嵗?，【實例中重寫了setInterval等一整套方法】。所以，千萬不能和 window 下掛載的方法混用
具體不同在于，window.setInterval執(zhí)行完比后返回一個id，而vue實例中返回【定時器對象】，當(dāng)然該對象中包含一個_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 是單頁面應(yīng)用，路由切換后，定時器并不會自動關(guān)閉，需要手動清除，當(dāng)頁面被銷毀時，清除定時器即可。
mounted(){
clearInterval(this.timer);
this.setTimer();
},
destroyed(){
clearInterval(this.timer)
}
以上這篇淺談vue 組件中的setInterval方法和window的不同就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面
這篇文章主要介紹了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue+canvas繪制時間軸的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
每天學(xué)點Vue源碼之vm.$mount掛載函數(shù)
這篇文章主要介紹了vm.$mount掛載函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue之webpack -v報錯解決方案總結(jié),本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue2如何使用vue-i18n搭建多語言切換環(huán)境
這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關(guān)知識,在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧2023-12-12
Vue.directive 實現(xiàn)元素scroll邏輯復(fù)用
這篇文章主要介紹了Vue.directive 實現(xiàn)元素scroll邏輯復(fù)用功能，文中給大家提到元素實現(xiàn)滾動的條件有兩個，具體內(nèi)容詳情大家參考下本文2019-11-11
Vue項目數(shù)據(jù)動態(tài)過濾實踐及實現(xiàn)思路
這篇文章主要介紹了Vue項目數(shù)據(jù)動態(tài)過濾實踐,，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了解讀vue項目防范XSS攻擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue自定義全局Toast和Loading,需要的朋友可以參考下2019-04-04
vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定）
本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07