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