perf(nuxt): use getters when constructing reactive routes (#21957)

nuxt · Jul 5, 2023 · 74c11dc · 74c11dc
1 parent d0dde64
commit 74c11dc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/nuxt/src/app/components/route-provider.ts b/packages/nuxt/src/app/components/route-provider.ts
@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, nextTick, onMounted, provide, reactive } from 'vue'
+import { defineComponent, h, nextTick, onMounted, provide, shallowReactive } from 'vue'
 import type { Ref, VNode } from 'vue'
 import type { RouteLocation, RouteLocationNormalizedLoaded } from '#vue-router'
 import { PageRouteSymbol } from '#app/components/injections'
@@ -28,10 +28,12 @@ export const RouteProvider = defineComponent({
     // Provide a reactive route within the page
     const route = {} as RouteLocation
     for (const key in props.route) {
-      (route as any)[key] = computed(() => previousKey === props.renderKey ? props.route[key as keyof RouteLocationNormalizedLoaded] : previousRoute[key as keyof RouteLocationNormalizedLoaded])
+      Object.defineProperty(route, key, {
+        get: () => previousKey === props.renderKey ? props.route[key as keyof RouteLocationNormalizedLoaded] : previousRoute[key as keyof RouteLocationNormalizedLoaded]
+      })
     }
 
-    provide(PageRouteSymbol, reactive(route))
+    provide(PageRouteSymbol, shallowReactive(route))
 
     let vnode: VNode
     if (process.dev && process.client && props.trackRootNodes) {

diff --git a/packages/nuxt/src/pages/runtime/plugins/router.ts b/packages/nuxt/src/pages/runtime/plugins/router.ts
@@ -1,4 +1,4 @@
-import { computed, isReadonly, reactive, shallowRef } from 'vue'
+import { isReadonly, reactive, shallowReactive, shallowRef } from 'vue'
 import type { Ref } from 'vue'
 import type { RouteLocation, Router, RouterScrollBehavior } from '#vue-router'
 import {
@@ -108,10 +108,12 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
     // https://github.com/vuejs/router/blob/main/packages/router/src/router.ts#L1225-L1233
     const route = {} as RouteLocation
     for (const key in _route.value) {
-      (route as any)[key] = computed(() => _route.value[key as keyof RouteLocation])
+      Object.defineProperty(route, key, {
+        get: () => _route.value[key as keyof RouteLocation]
+      })
     }
 
-    nuxtApp._route = reactive(route)
+    nuxtApp._route = shallowReactive(route)
 
     nuxtApp._middleware = nuxtApp._middleware || {
       global: [],