refactor: expose $self

packages/runtime-core/src/component.ts

@@ -30,6 +30,7 @@ export interface Component<P = {}, D = {}> extends PublicInstanceMethods {
   readonly $options: ComponentOptions<P, D, this>
   readonly $refs: Record<string | symbol, any>
   readonly $proxy: this
+  readonly $self: this
 }
 
 interface PublicInstanceMethods {
@@ -99,10 +100,10 @@ export interface ComponentInstance<P = {}, D = {}>
   $root: ComponentInstance
   $children: ComponentInstance[]
   $options: ComponentOptions<P, D>
+  $self: ComponentInstance<P, D> // on proxies only
 
   _update: ReactiveEffect
   _queueJob: ((fn: () => void) => void)
-  _self: ComponentInstance<P, D> // on proxies only
 }
 
 // actual implementation of the component

packages/runtime-core/src/componentInstance.ts

@@ -91,7 +91,7 @@ export function initializeComponentInstance(instance: ComponentInstance) {
 }
 
 export function teardownComponentInstance(instance: ComponentInstance) {
-  const parentComponent = instance.$parent && instance.$parent._self
+  const parentComponent = instance.$parent && instance.$parent.$self
   if (parentComponent && !parentComponent._unmounted) {
     parentComponent.$children.splice(
       parentComponent.$children.indexOf(instance.$proxy),

packages/runtime-core/src/componentProxy.ts

@@ -22,7 +22,7 @@ function getBoundMethod(fn: Function, target: any, receiver: any): Function {
 const renderProxyHandlers = {
   get(target: ComponentInstance<any, any>, key: string, receiver: any) {
     let i: any
-    if (key === '_self') {
+    if (key === '$self') {
       return target
     } else if ((i = target._rawData) !== null && i.hasOwnProperty(key)) {
       // data

packages/runtime-core/src/errorHandling.ts

@@ -56,11 +56,11 @@ export function callLifecycleHookWithHandler(
     const res = hook.call(instanceProxy, arg)
     if (res && !res._isVue && typeof res.then === 'function') {
       ;(res as Promise<any>).catch(err => {
-        handleError(err, instanceProxy._self, type)
+        handleError(err, instanceProxy.$self, type)
       })
     }
   } catch (err) {
-    handleError(err, instanceProxy._self, type)
+    handleError(err, instanceProxy.$self, type)
   }
 }
 
@@ -88,7 +88,7 @@ export function handleError(
     cur = (instance as ComponentInstance).$parent
   }
   while (cur) {
-    cur = cur._self
+    cur = cur.$self
     const handler = cur.errorCaptured
     if (handler) {
       try {
@@ -116,8 +116,9 @@ function logError(err: Error, type: ErrorTypes, contextVNode: VNode | null) {
     }
     if (/private field/.test(err.message)) {
       warn(
-        `Private fields are not supported in component classes because they ` +
-          `cannot be tunneled through Proxies.`
+        `Private fields cannot be accessed directly on \`this\` in a component ` +
+          `class because they cannot be tunneled through Proxies. ` +
+          `Use \`this.$self.#field\` instead.`
       )
     } else {
       warn(`Unhandled error${info ? ` ${info}` : ``}`)