refactor(runtime-core): refactor instance public proxy context object

Author: yyx990803

packages/runtime-core/__tests__/componentProxy.spec.ts

@@ -116,7 +116,7 @@ describe('component: proxy', () => {
     render(h(Comp), nodeOps.createElement('div'))
     instanceProxy.foo = 1
     expect(instanceProxy.foo).toBe(1)
-    expect(instance!.proxyTarget.foo).toBe(1)
+    expect(instance!.ctx.foo).toBe(1)
   })
 
   test('globalProperties', () => {
@@ -141,7 +141,7 @@ describe('component: proxy', () => {
     // set should overwrite globalProperties with local
     instanceProxy.foo = 2
     // expect(instanceProxy.foo).toBe(2)
-    expect(instance!.proxyTarget.foo).toBe(2)
+    expect(instance!.ctx.foo).toBe(2)
     // should not affect global
     expect(app.config.globalProperties.foo).toBe(1)
   })
@@ -177,7 +177,7 @@ describe('component: proxy', () => {
     expect('msg' in instanceProxy).toBe(true)
     // data
     expect('foo' in instanceProxy).toBe(true)
-    // renderContext
+    // ctx
     expect('bar' in instanceProxy).toBe(true)
     // public properties
     expect('$el' in instanceProxy).toBe(true)

packages/runtime-core/src/component.ts

@@ -8,12 +8,11 @@ import {
 } from '@vue/reactivity'
 import {
   ComponentPublicInstance,
-  ComponentPublicProxyTarget,
   PublicInstanceProxyHandlers,
   RuntimeCompiledPublicInstanceProxyHandlers,
-  createDevProxyTarget,
-  exposePropsOnDevProxyTarget,
-  exposeSetupStateOnDevProxyTarget
+  createRenderContext,
+  exposePropsOnRenderContext,
+  exposeSetupStateOnRenderContext
 } from './componentProxy'
 import { ComponentPropsOptions, initProps } from './componentProps'
 import { Slots, initSlots, InternalSlots } from './componentSlots'
@@ -136,30 +135,30 @@ export interface ComponentInternalInstance {
   components: Record<string, Component>
   directives: Record<string, Directive>
 
-  // the rest are only for stateful components
-  renderContext: Data
+  // the rest are only for stateful components ---------------------------------
+
+  // main proxy that serves as the public instance (`this`)
+  proxy: ComponentPublicInstance | null
+  // alternative proxy used only for runtime-compiled render functions using
+  // `with` block
+  withProxy: ComponentPublicInstance | null
+  // This is the target for the public instance proxy. It also holds properties
+  // injected by user options (computed, methods etc.) and user-attached
+  // custom properties (via `this.x = ...`)
+  ctx: Data
+
+  // internal state
   data: Data
   props: Data
   attrs: Data
   slots: InternalSlots
-  proxy: ComponentPublicInstance | null
   refs: Data
   emit: EmitFn
 
   // setup
   setupState: Data
   setupContext: SetupContext | null
 
-  // The target object for the public instance proxy. In dev mode, we also
-  // define getters for all known instance properties on it so it can be
-  // properly inspected in the console. These getters are skipped in prod mode
-  // for performance. In addition, any user attached properties
-  // (via `this.x = ...`) are also stored on this object.
-  proxyTarget: ComponentPublicProxyTarget
-  // alternative proxy used only for runtime-compiled render functions using
-  // `with` block
-  withProxy: ComponentPublicInstance | null
-
   // suspense related
   suspense: SuspenseBoundary | null
   asyncDep: Promise<any> | null
@@ -211,15 +210,14 @@ export function createComponentInstance(
     update: null!, // will be set synchronously right after creation
     render: null,
     proxy: null,
-    proxyTarget: null!, // to be immediately set
     withProxy: null,
     effects: null,
     provides: parent ? parent.provides : Object.create(appContext.provides),
     accessCache: null!,
     renderCache: [],
 
     // state
-    renderContext: EMPTY_OBJ,
+    ctx: EMPTY_OBJ,
     data: EMPTY_OBJ,
     props: EMPTY_OBJ,
     attrs: EMPTY_OBJ,
@@ -258,9 +256,9 @@ export function createComponentInstance(
     emit: null as any // to be set immediately
   }
   if (__DEV__) {
-    instance.proxyTarget = createDevProxyTarget(instance)
+    instance.ctx = createRenderContext(instance)
   } else {
-    instance.proxyTarget = { _: instance }
+    instance.ctx = { _: instance }
   }
   instance.root = parent ? parent.root : instance
   instance.emit = emit.bind(null, instance)
@@ -335,9 +333,9 @@ function setupStatefulComponent(
   // 0. create render proxy property access cache
   instance.accessCache = {}
   // 1. create public instance / render proxy
-  instance.proxy = new Proxy(instance.proxyTarget, PublicInstanceProxyHandlers)
+  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)
   if (__DEV__) {
-    exposePropsOnDevProxyTarget(instance)
+    exposePropsOnRenderContext(instance)
   }
   // 2. call setup()
   const { setup } = Component
@@ -399,7 +397,7 @@ export function handleSetupResult(
     // assuming a render function compiled from template is present.
     instance.setupState = reactive(setupResult)
     if (__DEV__) {
-      exposeSetupStateOnDevProxyTarget(instance)
+      exposeSetupStateOnRenderContext(instance)
     }
   } else if (__DEV__ && setupResult !== undefined) {
     warn(
@@ -469,7 +467,7 @@ function finishComponentSetup(
     // also only allows a whitelist of globals to fallthrough.
     if (instance.render._rc) {
       instance.withProxy = new Proxy(
-        instance.proxyTarget,
+        instance.ctx,
         RuntimeCompiledPublicInstanceProxyHandlers
       )
     }