基於vue設定定時觸發查詢方法

在 Vue.js 中，你可以使用 JavaScript 的 setInterval 方法來設定定時觸發一個查詢方法。你可以將這個定時器放在 Vue 元件的生命週期鉤子 mounted 中，這樣當元件被掛載到 DOM 上後，定時器就會開始執行。

以下是一個簡單的示例：

<template>
  <div>
    <!-- 你的元件模板 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,  // 儲存定時器的引用
    };
  },
  methods: {
    queryMethod() {
      // 這是你要定時執行的查詢方法
      console.log("查詢方法被觸發");
      // 在這裏編寫你的查詢邏輯
    }
  },
  mounted() {
    // 元件掛載後，設定定時器，每隔5秒執行一次 queryMethod
    this.timer = setInterval(this.queryMethod, 5000);
  },
  beforeDestroy() {
    // 在元件銷燬前清除定時器，避免記憶體洩漏
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped>
/* 你的元件樣式 */
</style>

關鍵點說明：

1. mounted 鉤子：在元件掛載到 DOM 之後執行一次，可以用來初始化定時器。

2. beforeDestroy 鉤子：在元件銷燬之前清除定時器，以避免記憶體洩漏或其他問題。

3. setInterval：用於設定定時器，按指定時間間隔（以毫秒為單位）重複執行一個函式。

透過這種方式，你可以定期觸發一個查詢方法，執行相應的操作。

改成 ts 語法

使用 TypeScript 編寫的 Vue 元件程式碼如下：

<template>
  <div>
    <!-- 你的元件模板 -->
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      timer: null as number | null, // 定時器的引用，型別為 number 或 null
    };
  },
  methods: {
    queryMethod(): void {
      // 這是你要定時執行的查詢方法
      console.log("查詢方法被觸發");
      // 在這裏編寫你的查詢邏輯
    }
  },
  mounted() {
    // 元件掛載後，設定定時器，每隔5秒執行一次 queryMethod
    this.timer = window.setInterval(this.queryMethod, 5000);
  },
  beforeUnmount() {
    // 在元件銷燬前清除定時器，避免記憶體洩漏
    if (this.timer !== null) {
      clearInterval(this.timer);
    }
  }
});
</script>

<style scoped>
/* 你的元件樣式 */
</style>

關鍵點說明：

1. lang="ts"：指定指令碼語言為 TypeScript。

2. defineComponent：在使用 TypeScript 時，推薦使用 defineComponent 函式來定義元件，以獲得更好的型別推斷。

3. 型別宣告：

• timer 被宣告為 number | null，因為 setInterval 返回一個 number，在清除定時器之前它可能是 null。

• queryMethod 方法的返回型別為 void，表示這個方法不返回任何值。