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

This commit is contained in:
Daniel Roe 2023-07-05 14:33:12 +02:00 committed by GitHub
parent d0dde6426f
commit 74c11dc662
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 6 deletions

View File

@ -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) {

View File

@ -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: [],