root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 9 Packages Projects Releases Wiki Activity

perf(ssr): avoid calling markRaw on component instance proxy 

The previous behavior invokes the definePropery proxy trap on the
instance proxy and has massive overhead. This change improves Vue
ops/sec by 40% in https://github.com/eknkc/ssr-benchmark
This commit is contained in:
Evan You 2024-04-12 11:49:31 +08:00
parent 34106bc9c7
commit 4bc9f39f02
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/runtime-core/src/component.ts
View File

@ -775,8 +775,7 @@ function setupStatefulComponent(
// 0. create render proxy property access cache // 0. create render proxy property access cache
instance.accessCache = Object.create(null) instance.accessCache = Object.create(null)
// 1. create public instance / render proxy // 1. create public instance / render proxy
// also mark it raw so it's never observed instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)
instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers))
if (__DEV__) { if (__DEV__) {
exposePropsOnRenderContext(instance) exposePropsOnRenderContext(instance)
} }

5
packages/runtime-core/src/componentPublicInstance.ts
View File

@ -23,6 +23,7 @@ import {
isString, isString,
} from '@vue/shared' } from '@vue/shared'
import { import {
ReactiveFlags,
type ShallowUnwrapRef, type ShallowUnwrapRef,
TrackOpTypes, TrackOpTypes,
type UnwrapNestedRefs, type UnwrapNestedRefs,
@ -307,6 +308,10 @@ const hasSetupBinding = (state: Data, key: string) =>
export const PublicInstanceProxyHandlers: ProxyHandler<any> = { export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
get({ _: instance }: ComponentRenderContext, key: string) { get({ _: instance }: ComponentRenderContext, key: string) {
if (key === ReactiveFlags.SKIP) {
return true
}
const { ctx, setupState, data, props, accessCache, type, appContext } = const { ctx, setupState, data, props, accessCache, type, appContext } =
instance instance