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:

1、setInterval事件和組件的生命周期沒有直接關系。
2、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)
    },