From 70d6632fd0049086b57608533d10ee79625ca764 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Sun, 18 May 2025 19:13:04 +0800
Subject: [PATCH] refactor: remove redundant watcher cleanup in Vue comps

Removes unnecessary manual watcher cleanup via stopWatchQueryChange across multiple Vue components.

Vue 3's watch() automatically handles cleanup when components are unmounted, making explicit stopWatchQueryChange calls and onBeforeUnmount handlers redundant.

This change:
- Improves code maintainability
- Reduces boilerplate code
- Follows Vue 3 best practices for reactive system cleanup
---
 app/components/dashboard/analysis/Counters.vue          | 6 +-----
 app/components/dashboard/analysis/Views.vue             | 6 +-----
 app/components/dashboard/analysis/metrics/Locations.vue | 6 +-----
 app/components/dashboard/analysis/metrics/Metric.vue    | 6 +-----
 app/components/dashboard/realtime/Chart.vue             | 6 +-----
 app/components/dashboard/realtime/Globe.vue             | 6 +-----
 app/components/dashboard/realtime/Logs.vue              | 6 +-----
 7 files changed, 7 insertions(+), 35 deletions(-)

diff --git a/app/components/dashboard/analysis/Counters.vue b/app/components/dashboard/analysis/Counters.vue
index e6fcaac..60b2ace 100644
--- a/app/components/dashboard/analysis/Counters.vue
+++ b/app/components/dashboard/analysis/Counters.vue
@@ -26,17 +26,13 @@ async function getLinkCounters() {
   counters.value = data?.[0]
 }
 
-const stopWatchQueryChange = watch([time, filters], getLinkCounters, {
+watch([time, filters], getLinkCounters, {
   deep: true,
 })
 
 onMounted(async () => {
   getLinkCounters()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>
diff --git a/app/components/dashboard/analysis/Views.vue b/app/components/dashboard/analysis/Views.vue
index 01555f9..095cb47 100644
--- a/app/components/dashboard/analysis/Views.vue
+++ b/app/components/dashboard/analysis/Views.vue
@@ -51,7 +51,7 @@ async function getLinkViews() {
   })
 }
 
-const stopWatchQueryChange = watch([time, filters], getLinkViews, {
+watch([time, filters], getLinkViews, {
   deep: true,
 })
 
@@ -59,10 +59,6 @@ onMounted(async () => {
   getLinkViews()
 })
 
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
-
 function formatTime(tick) {
   if (Number.isInteger(tick) && views.value[tick]) {
     if (getUnit(time.value.startAt, time.value.endAt) === 'hour')
diff --git a/app/components/dashboard/analysis/metrics/Locations.vue b/app/components/dashboard/analysis/metrics/Locations.vue
index 8d430b6..b1f257f 100644
--- a/app/components/dashboard/analysis/metrics/Locations.vue
+++ b/app/components/dashboard/analysis/metrics/Locations.vue
@@ -33,7 +33,7 @@ async function getMapData() {
   }
 }
 
-const stopWatchQueryChange = watch([time, filters], getMapData, {
+watch([time, filters], getMapData, {
   deep: true,
 })
 
@@ -42,10 +42,6 @@ onMounted(() => {
   getMapData()
 })
 
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
-
 const valueFormatter = v => v
 const Tooltip = {
   props: ['title', 'data'],
diff --git a/app/components/dashboard/analysis/metrics/Metric.vue b/app/components/dashboard/analysis/metrics/Metric.vue
index e682fdc..67dbbeb 100644
--- a/app/components/dashboard/analysis/metrics/Metric.vue
+++ b/app/components/dashboard/analysis/metrics/Metric.vue
@@ -45,17 +45,13 @@ async function getLinkMetrics() {
   }
 }
 
-const stopWatchQueryChange = watch([time, filters], getLinkMetrics, {
+watch([time, filters], getLinkMetrics, {
   deep: true,
 })
 
 onMounted(() => {
   getLinkMetrics()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>
diff --git a/app/components/dashboard/realtime/Chart.vue b/app/components/dashboard/realtime/Chart.vue
index 7e248bf..5f50f1a 100644
--- a/app/components/dashboard/realtime/Chart.vue
+++ b/app/components/dashboard/realtime/Chart.vue
@@ -20,17 +20,13 @@ async function getRealtimeStats() {
   stats.value = data?.[0] || {}
 }
 
-const stopWatchQueryChange = watch([time, filters], getRealtimeStats, {
+watch([time, filters], getRealtimeStats, {
   deep: true,
 })
 
 onMounted(async () => {
   getRealtimeStats()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>
diff --git a/app/components/dashboard/realtime/Globe.vue b/app/components/dashboard/realtime/Globe.vue
index 08985e8..9134c7f 100644
--- a/app/components/dashboard/realtime/Globe.vue
+++ b/app/components/dashboard/realtime/Globe.vue
@@ -104,7 +104,7 @@ function stopRotation() {
   }
 }
 
-const stopWatchQueryChange = watch([time, filters], getLiveLocations, {
+watch([time, filters], getLiveLocations, {
   deep: true,
 })
 
@@ -125,10 +125,6 @@ onMounted(async () => {
   await Promise.all([getGlobeJSON(), getLiveLocations()])
   initGlobe()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>
diff --git a/app/components/dashboard/realtime/Logs.vue b/app/components/dashboard/realtime/Logs.vue
index 362f6d4..1c686f5 100644
--- a/app/components/dashboard/realtime/Logs.vue
+++ b/app/components/dashboard/realtime/Logs.vue
@@ -19,17 +19,13 @@ async function getEvents() {
   logskey.value = Date.now()
 }
 
-const stopWatchQueryChange = watch([time, filters], getEvents, {
+watch([time, filters], getEvents, {
   deep: true,
 })
 
 onMounted(async () => {
   getEvents()
 })
-
-onBeforeUnmount(() => {
-  stopWatchQueryChange()
-})
 </script>
 
 <template>