perf(client): use eager computed for routeLocale

Author: meteorlxy

packages/client/package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "@vue/devtools-api": "^6.5.0",
     "@vuepress/shared": "workspace:*",
+    "@vueuse/core": "^10.2.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"
   },

packages/client/src/composables/routeLocale.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue'
-import type { ComputedRef, InjectionKey } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
 
 /**
  * Route locale path
@@ -9,7 +9,7 @@ export type RouteLocale = string
 /**
  * Ref wrapper of `RouteLocale`
  */
-export type RouteLocaleRef = ComputedRef<RouteLocale>
+export type RouteLocaleRef = Readonly<Ref<RouteLocale>>
 
 /**
  * Injection key for page route locale path

packages/client/src/setupGlobalComputed.ts

@@ -1,4 +1,5 @@
-import { type App, computed, ref, watch } from 'vue'
+import { computedEager } from '@vueuse/core'
+import { type App, computed } from 'vue'
 import type { Router } from 'vue-router'
 import {
   type LayoutsRef,
@@ -58,17 +59,13 @@ export const setupGlobalComputed = (
   router: Router,
   clientConfigs: ClientConfig[]
 ): GlobalComputed => {
-  // create a manual computed route path, so that route hash changes won't trigger all downstream computed
-  const routePath = ref(router.currentRoute.value.path)
-  watch(
-    () => router.currentRoute.value.path,
-    (value) => (routePath.value = value)
-  )
-
   // create global computed
   const layouts = computed(() => resolvers.resolveLayouts(clientConfigs))
-  const routeLocale = computed(() =>
-    resolvers.resolveRouteLocale(siteData.value.locales, routePath.value)
+  const routeLocale = computedEager(() =>
+    resolvers.resolveRouteLocale(
+      siteData.value.locales,
+      router.currentRoute.value.path
+    )
   )
   const siteLocaleData = computed(() =>
     resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value)

packages/client/src/setupUpdateHead.ts

@@ -61,10 +61,7 @@ export const setupUpdateHead = (): void => {
   onMounted(() => {
     loadHead()
     updateHead()
-    watch(
-      () => head.value,
-      () => updateHead()
-    )
+    watch(() => head.value, updateHead)
   })
 }