From 086e9a8c60f4c9ea6df00058d9acb607e61eb546 Mon Sep 17 00:00:00 2001
From: HavocZ <havoc_zhang@yeah.net>
Date: Fri, 25 Aug 2023 14:36:03 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=8D=95=E7=8B=AC?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=E8=B7=AF=E7=94=B1=E6=B5=AA=E8=B4=B9=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E6=80=A7=E8=83=BD=E7=9A=84=E9=97=AE=E9=A2=98=20(#120)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |  1 +
 pnpm-lock.yaml                            |  7 ++++++
 src/layouts/components/TagsView/index.vue | 27 +++++++++++-----------
 src/router/permission.ts                  |  2 ++
 src/utils/route-listener.ts               | 28 +++++++++++++++++++++++
 5 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/route-listener.ts

diff --git a/package.json b/package.json
index 07b231d..e9ea3a1 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "element-plus": "2.3.9",
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
+    "mitt": "3.0.1",
     "normalize.css": "8.0.1",
     "nprogress": "0.2.0",
     "path-browserify": "1.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3107f6..70ebb4e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   lodash-es:
     specifier: 4.17.21
     version: 4.17.21
+  mitt:
+    specifier: 3.0.1
+    version: 3.0.1
   normalize.css:
     specifier: 8.0.1
     version: 8.0.1
@@ -3777,6 +3780,10 @@ packages:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
 
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: false
+
   /mixin-deep@1.3.2:
     resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
     engines: {node: '>=0.10.0'}
diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue
index 5843bda..aeda643 100644
--- a/src/layouts/components/TagsView/index.vue
+++ b/src/layouts/components/TagsView/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { getCurrentInstance, onMounted, ref, watch } from "vue"
-import { type RouteRecordRaw, RouterLink, useRoute, useRouter } from "vue-router"
+import { getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue"
+import { type RouteLocationNormalizedLoaded, type RouteRecordRaw, RouterLink, useRoute, useRouter } from "vue-router"
 import { type TagView, useTagsViewStore } from "@/store/modules/tags-view"
 import { usePermissionStore } from "@/store/modules/permission"
-import ScrollPane from "./ScrollPane.vue"
+import { listenerRouteChange, removeRouteListener } from "@/utils/route-listener"
 import path from "path-browserify"
+import ScrollPane from "./ScrollPane.vue"
 import { Close } from "@element-plus/icons-vue"
 
 const instance = getCurrentInstance()
@@ -68,7 +69,7 @@ const initTags = () => {
 }
 
 /** 添加标签页 */
-const addTags = () => {
+const addTags = (route: RouteLocationNormalizedLoaded) => {
   if (route.name) {
     tagsViewStore.addVisitedView(route)
     tagsViewStore.addCachedView(route)
@@ -147,15 +148,9 @@ const closeMenu = () => {
   visible.value = false
 }
 
-watch(
-  route,
-  () => {
-    addTags()
-  },
-  {
-    deep: true
-  }
-)
+listenerRouteChange((route) => {
+  addTags(route)
+})
 
 watch(visible, (value) => {
   value ? document.body.addEventListener("click", closeMenu) : document.body.removeEventListener("click", closeMenu)
@@ -163,7 +158,11 @@ watch(visible, (value) => {
 
 onMounted(() => {
   initTags()
-  addTags()
+  addTags(route)
+})
+
+onUnmounted(() => {
+  removeRouteListener()
 })
 </script>
 
diff --git a/src/router/permission.ts b/src/router/permission.ts
index 22c9ad6..25d8492 100644
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@@ -4,6 +4,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission"
 import { ElMessage } from "element-plus"
 import { getToken } from "@/utils/cache/cookies"
 import { fixBlankPage } from "@/utils/fix-blank-page"
+import { setRouteEmitter } from "@/utils/route-listener"
 import routeSettings from "@/config/route"
 import isWhiteList from "@/config/white-list"
 import NProgress from "nprogress"
@@ -13,6 +14,7 @@ NProgress.configure({ showSpinner: false })
 
 router.beforeEach(async (to, _from, next) => {
   fixBlankPage()
+  setRouteEmitter(to)
   NProgress.start()
   const userStore = useUserStoreHook()
   const permissionStore = usePermissionStoreHook()
diff --git a/src/utils/route-listener.ts b/src/utils/route-listener.ts
new file mode 100644
index 0000000..f8e82ea
--- /dev/null
+++ b/src/utils/route-listener.ts
@@ -0,0 +1,28 @@
+/** 单独监听路由会浪费渲染性能，使用发布订阅模式去进行分发管理 */
+
+import mitt, { type Handler } from "mitt"
+import { type RouteLocationNormalized } from "vue-router"
+
+/** 回调函数的类型 */
+type Callback = (route: RouteLocationNormalized) => void
+
+const emitter = mitt()
+const key = Symbol("ROUTE_CHANGE")
+let latestRoute: RouteLocationNormalized
+
+/** 设置最新的路由信息 */
+export const setRouteEmitter = (to: RouteLocationNormalized) => {
+  emitter.emit(key, to)
+  latestRoute = to
+}
+
+/** 设置路由变化时的回调函数（可以选择立即执行一次回调函数） */
+export const listenerRouteChange = (callback: Callback, immediate = false) => {
+  emitter.on(key, callback as Handler)
+  immediate && latestRoute && callback(latestRoute)
+}
+
+/** 移除路由变化事件监听器 */
+export const removeRouteListener = () => {
+  emitter.off(key)
+}