淺談vue 組件中的setInterval方法和window的不同
更新時間：2020年07月30日 08:39:33 作者：龍旗飄揚的艦隊
這篇文章主要介紹了淺談vue 組件中的setInterval方法和window的不同，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue組件中，this指向實例，【實例中重寫了setInterval等一整套方法】。所以，千萬不能和 window 下掛載的方法混用
具體不同在于，window.setInterval執(zhí)行完比后返回一個id，而vue實例中返回【定時器對象】，當然該對象中包含一個_id的私有屬性
因為 clearInterval 方法參數是id，所以最佳實踐是統一使用 window 的方法，不要使用 vue組件的方法
vue中的定時器方法，要使用箭頭函數，不要出現 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 是單頁面應用，路由切換后，定時器并不會自動關閉，需要手動清除，當頁面被銷毀時，清除定時器即可。
mounted(){
clearInterval(this.timer);
this.setTimer();
},
destroyed(){
clearInterval(this.timer)
}
以上這篇淺談vue 組件中的setInterval方法和window的不同就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家學習介紹了Vue3如何利用element實現表格數據導出功能，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起學習一下吧2023-07-07
vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue?中使用?this?更新數據的一次大坑?,我在 vue 實例中聲明了一個數組屬性如?books: []，在異步請求的回調函數中使用?this.books = res.data.data;?進行數據更新，感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要介紹了Vue組件中的data必須是一個function的原因淺析，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue前端后端的交互方式?axios，axios?為第三方數據請求庫，下文具體的內容介紹需要的小伙伴可以參考一下，希望對你的學習有所幫助2022-04-04
這篇文章主要介紹了vue項目首屏打開速度慢的解決方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue3如何通過provide和inject實現多層級組件通信
這篇文章主要介紹了vue3如何通過provide和inject實現多層級組件通信,本文通過實例代碼給大家講解的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue2.X和Vue3.0數據響應原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了vue3封裝echarts圖表數據無法渲染到頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
在Vue.js開發(fā)中,經常會遇到需要展示搜索和列表的需求,為了提高代碼復用性和開發(fā)效率,我們可以封裝一個可配置的搜索列表組件,下面我們就來講講如何實現這樣一個組件吧2023-08-08