在Vue应用开发过程中，我们常常会遇到这样的需求：在页面停留时每隔一段时间执行某个方法，但当用户离开页面后，这个定时调用的方法需要停止。那么如何在Vue应用中实现这一功能呢？

我们可以利用JavaScript的setInterval函数来实现每隔10秒调用方法的功能。在Vue组件中，我们可以在created或mounted钩子函数中创建setInterval定时器。例如：

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

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

上述代码中，在mounted钩子函数里创建了一个setInterval定时器，每10秒调用一次myMethod方法。

接下来，关键的部分是如何在用户离开页面时停止这个定时器。我们可以利用beforeDestroy钩子函数，当组件被销毁时清除定时器。修改代码如下：

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

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

在beforeDestroy钩子函数中，我们检查timer是否存在，如果存在则使用clearInterval清除定时器，这样当用户离开页面（组件被销毁）时，定时器就会停止工作，不再每隔10秒调用方法。

通过这种方式，我们在Vue应用中成功实现了停止离开页面后每隔10秒调用方法的功能，确保了资源的合理利用，避免了不必要的方法调用，提升了应用的性能和用户体验。掌握这一技巧，能让我们在处理类似定时任务时更加得心应手。