Vue 3 setInterval 方法行为

Question

环境

我有一个 Vue 3 应用程序，它需要一个常量 setInterval() 在后台（游戏循环）中为运行。

我把它放在 store/index.js 中，然后在 mounted() 上从 views/Playground.vue 调用它。离开 Playground 时，我打电话给 beforeUnmount()。确保没有多个 setInterval() 是运行.

// store/index.js
startGameLoop({ commit, dispatch, getters }) {
  commit(
    "setIntervalId",
    setInterval(() => {
      dispatch("addPower", getters["ship/getFuelPerSecond"]);
    }, 1000)
  );
},

// Playground.vue
beforeUnmount() {
  clearInterval(this.intervalId);
}

在 Playground.vue 的顶部有一个分数显示并在 setInterval() 中更新。我使用一个名为 gsap 的库来使不断变化的数字看起来更悦目。

<h2>Points: {{ tweened.toFixed(0) }}</h2>

watch: {
  points(n) {
    console.log("gsap");
    gsap.to(this, { duration: 0.2, tweened: Number(n) || 0 });
  },
},

问题

methods 来自 Playground.vue 的发射方式不同，我正在努力理解为什么会这样。

gsap

gsap 中的 watch 每秒都会被触发，就像我对 setInterval() 的期望一样，但是...

图片

我在 Playground 的中心显示和图像，其中 src 部分是 v-bind 到一个名为 getEnemyShipImage 的方法。将来我想以编程方式更改显示的敌舰 - 但该方法每秒调用 34 次。这是为什么？

<img
   :class="{ flashing: flash }"
   @click="fightEnemie()"
   :src="getEnemyShipImage()"
   alt=""
/>

getEnemyShipImage() {
   console.log("image");
   return require("@/assets/ships/ship-001.png");
}

日志（浏览器）

Console Log Output

Answer 1

在不使用 method 的情况下将其移动到某个部分，并将更改图像切换为 watch。

data: () => {
  return {
    ...
    selectedImages: "",
    images: [
      require("@/assets/ships/ship-001.png"),
      require("@/assets/ships/ship-002.png"),
      require("@/assets/ships/ship-003.png"),
    ],
  };
},

// initial value
mounted() {
  this.selectedImages =
    this.images[Math.floor(Math.random() * this.images.length)];
  this.$store.dispatch("startGameLoop");
}

// watch score
watch: {
    score() {
    this.selectedImages =
      this.images[Math.floor(Math.random() * this.images.length)];
  },
}

它并不完美，但作为初始状态更好。

Vue 3 setInterval 方法行为

Vue 3 setInterval Methods behavior

javascript

vue.js

vuejs3

环境

问题

gsap

图片

日志（浏览器）