vue單頁應用中，使用setInterval()定時向服務器獲取數據，後來跳轉頁面後，發現還在不停的獲取數據。

使用VUE開發單頁項目時遇到這樣的問題，mounted中使用setInterval()定時向服務器獲取數據，後來跳轉頁面後，發現還在不停的獲取數據。我覺得是由於我路由用的push致使的，改爲replace也是這樣，後來就在博客園找到答案了，以下：

http://www.cnblogs.com/zzbp/p/5834110.html

問題：(javascript)使用Vuejs + Vue-router 開發單頁面，如何使得切換頁面時能銷燬原組件？
描述:

我有一個單頁面應用，有頁面A和頁面B，兩者是同級組件，關係是這樣的：

　

router.map({
'/a': {
    component: A
},

'/b': {
    component: B
},`

例如，第一次打開時，顯示頁面 A，頁面 A 有一個setInterval事件，每隔一秒鐘會向後臺發送一個Ajax請求。這時我點擊頁面 A 上的跳轉按鈕，跳到頁面 B，經過觀察網絡鏈接，發現頁面 A 上的Ajax請求仍然在繼續。

請問應當進行什麼樣的設置，才能使得頁面切換時，原來的組件就被銷燬？

這是個很是嚴重的問題，同級組件綁定的事件，還會在另外一個組件裏繼續監聽。因此我猜測會有簡單的配置方法，但我看遍了 Vue 的文檔和 Vue-router 的文檔，也未發現相關配置。

解決方案1:

一、setInterval事件和組件的生命週期沒有直接關係。
二、setInterval會返回一個ID 值。setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

解決方案2:

router切換時，原來的組件確實已經銷燬了，你能夠看到ready生命週期函數是每次都觸發了的。你這裏的問題不在於組件是否銷燬，由於setInterval事件自己和組件沒有關係。

setInterval至關於該組件申請的一種資源，在使用該組件時獲取，在離開該組件時釋放。這個過程只能是你手動進行的。因此你應該在離開該組件時，好比route的deactivate或者beforeDestory生命週期函數裏手動clearInterval。

其實不少框架裏都是這樣，好比桌面程序中某個窗口初始化時須要打開數據庫鏈接（咱們也能夠視爲一種資源），當窗口關閉時，程序自己並不知道「打開數據庫鏈接」的反向操做是什麼。因此咱們須要在窗口銷燬的回調方法裏手動去釋放這個資源，去寫斷開鏈接的代碼。

解決方案3:

http://stackoverflow.com/questions/35104770/how-to-destroy-a-component-when-building-spa-with-vue-js-and-vue-router

http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html

 

最後我根據解決方案1解決了，貼下個人代碼：

created () {
      this.intervalid1 = setInterval(() => {
        var sid = this.stationid
        this.$store.dispatch('fetchStationDetail', sid)
      }, 20000)
      this.intervalid2 = setInterval(() => {
        var sid = this.stationid
        var thedate = new Date(this.seldate)
        var nowdate = new Date()
        if (thedate.toLocaleDateString() === nowdate.toLocaleDateString()) {
          var theyear = thedate.getFullYear()
          var themonth = thedate.getMonth() + 1
          this.$store.dispatch('fetchStationPowers', {
            id: sid,
            yearint: theyear,
            monthint: themonth
          })
        }
      }, 60000)
    },

beforeDestroy () {
      clearInterval(this.intervalid1)
      clearInterval(this.intervalid2)
    },