From fa0745735b6801a28ea2e36e28c1699af2d528ba Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Sun, 5 Feb 2023 15:59:55 +0800 Subject: [PATCH 1/5] fix(client): avoid updating routeLocale --- packages/client/src/setupGlobalComputed.ts | 19 ++++++++++++++----- packages/client/src/setupUpdateHead.ts | 8 +------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts index 078b0ec0b2..4daa248fe6 100644 --- a/packages/client/src/setupGlobalComputed.ts +++ b/packages/client/src/setupGlobalComputed.ts @@ -1,4 +1,4 @@ -import { type App, computed } from 'vue' +import { type App, computed, ref, watch } from 'vue' import type { Router } from 'vue-router' import { type LayoutsRef, @@ -60,11 +60,10 @@ export const setupGlobalComputed = ( ): GlobalComputed => { // create global computed const layouts = computed(() => resolvers.resolveLayouts(clientConfigs)) + const routePath = ref(router.currentRoute.value.path) + const routeLocale = computed(() => - resolvers.resolveRouteLocale( - siteData.value.locales, - router.currentRoute.value.path - ) + resolvers.resolveRouteLocale(siteData.value.locales, routePath.value) ) const siteLocaleData = computed(() => resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value) @@ -87,6 +86,16 @@ export const setupGlobalComputed = ( resolvers.resolvePageLayout(pageData.value, layouts.value) ) + // router.currentRoute is a ref, so we must watch routePath explicitly + watch( + () => router.currentRoute.value.path, + (newValue) => { + if (newValue !== routePath.value) { + routePath.value = newValue + } + } + ) + // provide global computed app.provide(layoutsSymbol, layouts) app.provide(pageFrontmatterSymbol, pageFrontmatter) diff --git a/packages/client/src/setupUpdateHead.ts b/packages/client/src/setupUpdateHead.ts index dad13d6e13..f64d35d829 100644 --- a/packages/client/src/setupUpdateHead.ts +++ b/packages/client/src/setupUpdateHead.ts @@ -1,7 +1,6 @@ import { isPlainObject, isString } from '@vuepress/shared' import type { HeadConfig, VuepressSSRContext } from '@vuepress/shared' import { onMounted, provide, ref, useSSRContext, watch } from 'vue' -import { useRoute } from 'vue-router' import { updateHeadSymbol, usePageHead, @@ -13,7 +12,6 @@ import type { UpdateHead } from './composables/index.js' * Auto update head and provide as global util */ export const setupUpdateHead = (): void => { - const route = useRoute() const head = usePageHead() const lang = usePageLang() @@ -64,11 +62,7 @@ export const setupUpdateHead = (): void => { loadHead() updateHead() watch( - // when watching `head`, route hash changes will also trigger the watcher, - // causing unnecessary head updates - // so we watch `head` in dev mode to support hot-reload of `frontmatter.head`, - // and watch `route.path` in production mode to avoid extra updates - () => (__VUEPRESS_DEV__ ? head.value : route.path), + () => head.value, () => updateHead() ) }) From 205096fb99ecfcc1d1b7d199246791a84debb811 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Wed, 15 Feb 2023 21:45:39 +0800 Subject: [PATCH 2/5] chore: remove if --- packages/client/src/setupGlobalComputed.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts index 4daa248fe6..71c2e49fb3 100644 --- a/packages/client/src/setupGlobalComputed.ts +++ b/packages/client/src/setupGlobalComputed.ts @@ -90,9 +90,7 @@ export const setupGlobalComputed = ( watch( () => router.currentRoute.value.path, (newValue) => { - if (newValue !== routePath.value) { - routePath.value = newValue - } + routePath.value = newValue } ) From fd296caad1ccbf38d3d9ada6e09b45406ec51c27 Mon Sep 17 00:00:00 2001 From: Xinyu Liu Date: Thu, 16 Feb 2023 09:47:47 +0800 Subject: [PATCH 3/5] Update setupGlobalComputed.ts --- packages/client/src/setupGlobalComputed.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts index 71c2e49fb3..f9cfb37587 100644 --- a/packages/client/src/setupGlobalComputed.ts +++ b/packages/client/src/setupGlobalComputed.ts @@ -58,10 +58,14 @@ export const setupGlobalComputed = ( router: Router, clientConfigs: ClientConfig[] ): GlobalComputed => { + 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 routePath = ref(router.currentRoute.value.path) - const routeLocale = computed(() => resolvers.resolveRouteLocale(siteData.value.locales, routePath.value) ) @@ -86,14 +90,6 @@ export const setupGlobalComputed = ( resolvers.resolvePageLayout(pageData.value, layouts.value) ) - // router.currentRoute is a ref, so we must watch routePath explicitly - watch( - () => router.currentRoute.value.path, - (newValue) => { - routePath.value = newValue - } - ) - // provide global computed app.provide(layoutsSymbol, layouts) app.provide(pageFrontmatterSymbol, pageFrontmatter) From b0bffe5ff3ccb20a2ed4b44ad3a80d2c852dedf4 Mon Sep 17 00:00:00 2001 From: Xinyu Liu Date: Thu, 16 Feb 2023 10:00:47 +0800 Subject: [PATCH 4/5] Update setupGlobalComputed.ts --- packages/client/src/setupGlobalComputed.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts index f9cfb37587..6a6e1e012b 100644 --- a/packages/client/src/setupGlobalComputed.ts +++ b/packages/client/src/setupGlobalComputed.ts @@ -58,6 +58,7 @@ 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, From 671f3968107c1f7ad3e758b80924714df2da6dfa Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 16 Feb 2023 10:03:41 +0800 Subject: [PATCH 5/5] chore: lint --- packages/client/src/setupGlobalComputed.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts index 6a6e1e012b..2041cb8261 100644 --- a/packages/client/src/setupGlobalComputed.ts +++ b/packages/client/src/setupGlobalComputed.ts @@ -64,7 +64,7 @@ export const setupGlobalComputed = ( () => router.currentRoute.value.path, (value) => (routePath.value = value) ) - + // create global computed const layouts = computed(() => resolvers.resolveLayouts(clientConfigs)) const routeLocale = computed(() =>