Vue中实现每隔10秒调用方法且离开页面时停止调用的方法

在Vue开发中，经常会遇到需要定时执行某个方法的需求，同时当用户离开该页面时，要停止这个定时任务，以避免不必要的资源消耗。下面将介绍一种实现这种功能的方法。

我们需要在Vue组件的生命周期钩子函数中设置定时器。在Vue中，可以使用setInterval函数来实现定时调用方法的功能。例如，我们在mounted钩子函数中设置定时器，如下所示：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(this.callMethod, 10000);
  },
  methods: {
    callMethod() {
      // 这里编写需要定时执行的代码逻辑
      console.log('每隔10秒执行一次');
    }
  }
};
</script>

上述代码中，我们在mounted钩子函数中使用setInterval函数设置了一个定时器，每隔10秒调用一次callMethod方法。我们将定时器的返回值保存在timer变量中，以便后续清除定时器。

接下来，我们需要在组件销毁时清除定时器，以避免内存泄漏。在Vue中，可以使用beforeDestroy钩子函数来清除定时器，如下所示：

<script>
export default {
  //...
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

通过在beforeDestroy钩子函数中调用clearInterval函数，我们可以清除定时器，从而停止定时任务的执行。

如果我们使用的是Vue Router进行页面导航，还可以在beforeRouteLeave导航守卫中清除定时器，以确保在离开页面时停止定时任务。示例代码如下：

<script>
export default {
  //...
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer);
    next();
  }
};
</script>

通过上述方法，我们可以在Vue中实现每隔10秒调用方法，并且在离开页面时停止调用的功能，有效提高应用的性能和用户体验。