在Vue项目开发中，我们常常会遇到需要在页面中定时执行某些方法的场景，比如每隔10秒调用一次接口获取最新数据。然而，当用户离开当前页面时，如果不停止这些定时调用的方法，不仅会浪费资源，还可能引发一些潜在的问题。那么，Vue页面离开时怎样停止每隔10秒调用的方法呢？

我们可以使用Vue的生命周期钩子函数来实现这一需求。在Vue组件中，created钩子函数通常用于初始化数据和执行一些一次性的操作，而mounted钩子函数在组件挂载到DOM后被调用。我们可以在mounted钩子函数中开启定时任务。例如：

export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      // 这里编写需要每隔10秒执行的方法
      console.log('每隔10秒执行一次');
    }, 10000);
  }
}

上述代码中，我们在mounted钩子函数里使用setInterval创建了一个定时器，每10秒执行一次console.log操作。

接下来，我们需要在页面离开时停止这个定时器。Vue提供了beforeDestroy钩子函数，这个钩子函数在组件实例销毁之前被调用。我们可以在这个钩子函数中清除定时器：

export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('每隔10秒执行一次');
    }, 10000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}

在beforeDestroy钩子函数中，我们首先检查timer是否存在，如果存在则使用clearInterval方法清除定时器，并将timer设置为null。这样，当组件被销毁时，定时器就会被正确停止，避免了资源的浪费。

另外，如果使用的是Vue Router进行路由管理，还可以利用beforeRouteLeave守卫来实现类似的功能。这个守卫在导航离开当前路由时被调用，我们同样可以在其中清除定时器。

在Vue页面离开时停止每隔10秒调用的方法，关键在于合理利用Vue的生命周期钩子函数和路由守卫，确保定时器在合适的时机被清除，从而提升应用的性能和稳定性。