vue 定时刷新单页面_vue单页应用中，使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。...

使用VUE开发单页项目时遇到这样的问题，mounted中使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。我觉得是由于我路由用的push致使的，改为replace也是这样，后来就在博客园找到答案了，以下：javascript

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

问题：(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？

描述:vue

我有一个单页面应用，有页面A和页面B，两者是同级组件，关系是这样的：java

router.map({

'/a': {

component: A

},

'/b': {

component: B

},`

例如，第一次打开时，显示页面 A，页面 A 有一个setInterval事件，每隔一秒钟会向后台发送一个Ajax请求。这时我点击页面 A 上的跳转按钮，跳到页面 B，经过观察网络链接，发现页面 A 上的Ajax请求仍然在继续。git

请问应当进行什么样的设置，才能使得页面切换时，原来的组件就被销毁？github

这是个很是严重的问题，同级组件绑定的事件，还会在另外一个组件里继续监听。因此我猜测会有简单的配置方法，但我看遍了 Vue 的文档和 Vue-router 的文档，也未发现相关配置。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.stationidthis.$store.dispatch('fetchStationDetail', sid)

},20000)this.intervalid2 = setInterval(() =>{var sid = this.stationidvar thedate = new Date(this.seldate)var nowdate = newDate()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)

},