Vue中在組件銷毀時清除定時器(setInterval)

在mounted中創建并執行定時器,然后在beforeDestroy或者destroyed中清除定時器

    <template>
      <div class="about">
      </div>
    </template>
    <script>
    export default {
        name: "about",
        data() {
            return {
                //接收定時器
                timer: ""
            };
        },
        mounted() {
            let _this = this;
            let num = 0;
            //創建并執行定時器
            this.timer = setInterval(() => {
              //當num等于100時清除定時器
                if (num == 100) {
                    clearInterval(_this.timer);
                }
                console.log(num++);
            }, 1000);
        },
        beforeDestroy() {
            //清除定時器
            clearInterval(this.timer);
            console.log("beforeDestroy");
        },
        destroyed() {
            //清除定時器
            //clearInterval(this.timer);
            console.log("destroyed");
        }
    };
    </script>
    <style scoped>
    </style>

這樣在組件銷毀時會清除定時器,具體參考的是vue的生命周期函數,詳情去官網查看哦

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • vue筆記 一.vue實例 vue的生命周期 beforeCreate(創建前), created(創建后), b...
    秋殤1002閱讀 1,073評論 0 1
  • 基于Vue的組件庫 https://github.com/ElemeFE/element" element 餓了...
    _執著執著再執著閱讀 32,775評論 4 230
  • 這次匆忙補作業,我認為也符合牌的提示。 第一眼看到這兩張牌,我高興了一下,好豐盛呀。我的問題承接了第一次問題,想繼...
    太陽巖閱讀 1,434評論 0 1
  • 我很羨慕會聊天的人,真的。 有次朋友聚會,認識不認識的,一群人,圍在飯店的圓桌前。席間,有組織者逐一介紹大家認識。...
    言幾又閱讀 269評論 0 2