perf: 优化单独监听路由浪费渲染性能的问题 (#120)

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",

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'}

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>
 

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()

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)
+}