perf: use getter instead of computed for route location (#1916)

Author: antfu

packages/router/__tests__/mount.ts

@@ -1,4 +1,4 @@
-import { reactive, nextTick, ComputedRef, computed, shallowRef } from 'vue'
+import { nextTick, shallowRef, shallowReactive } from 'vue'
 import { RouteLocationNormalizedLoose } from './utils'
 import {
   routeLocationKey,
@@ -9,12 +9,6 @@ import { RouteLocationNormalized } from '../src'
 export function createMockedRoute(
   initialValue: RouteLocationNormalizedLoose | RouteLocationNormalized
 ) {
-  const route = {} as {
-    [k in keyof RouteLocationNormalizedLoose]: ComputedRef<
-      RouteLocationNormalizedLoose[k]
-    >
-  }
-
   const routeRef = shallowRef<
     RouteLocationNormalized | RouteLocationNormalizedLoose
   >(initialValue)
@@ -26,14 +20,16 @@ export function createMockedRoute(
     return nextTick()
   }
 
+  const route = {} as RouteLocationNormalizedLoose
+
   for (let key in initialValue) {
-    // @ts-expect-error
-    route[key] =
-      // new line to still get errors here
-      computed(() => routeRef.value[key as keyof RouteLocationNormalizedLoose])
+    Object.defineProperty(route, key, {
+      enumerable: true,
+      get: () => routeRef.value[key as keyof RouteLocationNormalizedLoose],
+    })
   }
 
-  const value = reactive(route)
+  const value = shallowReactive(route)
 
   return {
     value,

packages/router/src/router.ts

@@ -41,16 +41,7 @@ import {
   stringifyQuery as originalStringifyQuery,
   LocationQuery,
 } from './query'
-import {
-  shallowRef,
-  Ref,
-  nextTick,
-  App,
-  ComputedRef,
-  reactive,
-  unref,
-  computed,
-} from 'vue'
+import { shallowRef, Ref, nextTick, App, unref, shallowReactive } from 'vue'
 import { RouteRecord, RouteRecordNormalized } from './matcher/types'
 import {
   parseURL,
@@ -1235,18 +1226,16 @@ export function createRouter(options: RouterOptions): Router {
         })
       }
 
-      const reactiveRoute = {} as {
-        [k in keyof RouteLocationNormalizedLoaded]: ComputedRef<
-          RouteLocationNormalizedLoaded[k]
-        >
-      }
+      const reactiveRoute = {} as RouteLocationNormalizedLoaded
       for (const key in START_LOCATION_NORMALIZED) {
-        // @ts-expect-error: the key matches
-        reactiveRoute[key] = computed(() => currentRoute.value[key])
+        Object.defineProperty(reactiveRoute, key, {
+          get: () => currentRoute.value[key as keyof RouteLocationNormalized],
+          enumerable: true,
+        })
       }
 
       app.provide(routerKey, router)
-      app.provide(routeLocationKey, reactive(reactiveRoute))
+      app.provide(routeLocationKey, shallowReactive(reactiveRoute))
       app.provide(routerViewLocationKey, currentRoute)
 
       const unmountApp = app.unmount