Tengo una aplicación Vue 3 que requiere un setInterval() constante para ejecutarse en segundo plano (Game Loop).
Lo puse en store/index.js y lo llamé desde views/Playground.vue en mounted() . Al salir de Playground llamo beforeUnmount() . Asegurándose de que no se estén ejecutando múltiples setInterval() .
// store/index.js startGameLoop({ commit, dispatch, getters }) { commit( "setIntervalId", setInterval(() => { dispatch("addPower", getters["ship/getFuelPerSecond"]); }, 1000) ); }, // Playground.vue beforeUnmount() { clearInterval(this.intervalId); } En la sección superior de Playground.vue , se muestra y actualiza una puntuación dentro de setInterval() . Utilizo una biblioteca llamada gsap para hacer que los números cambiantes sean un poco agradables a la vista.
<h2>Points: {{ tweened.toFixed(0) }}</h2> watch: { points(n) { console.log("gsap"); gsap.to(this, { duration: 0.2, tweened: Number(n) || 0 }); }, }, los methods de Playground.vue se disparan de manera diferente y estoy luchando por entender por qué ese es el caso.
el watch de gsap se dispara cada segundo como esperaría de setInterval() pero...
En el centro de Playground, visualizo una imagen donde la parte src está getEnemyShipImage v-bind En el futuro, me gustaría cambiar la nave enemiga mostrada mediante programación, pero el método se llama 34 veces por segundo. ¿Porqué es eso?
<img :class="{ flashing: flash }" @click="fightEnemie()" :src="getEnemyShipImage()" alt="" /> getEnemyShipImage() { console.log("image"); return require("@/assets/ships/ship-001.png"); }lo movió a una parte sin usar un method y cambió las imágenes cambiantes a un 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)]; }, }no es perfecto pero mejor que inicialmente.