refactor: expose $self

This commit is contained in:
Evan You 2019-03-01 13:47:28 -05:00
parent fa2240143c
commit 66686f38a7
4 changed files with 10 additions and 8 deletions

View File

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

View File

@ -91,7 +91,7 @@ export function initializeComponentInstance(instance: ComponentInstance) {
} }
export function teardownComponentInstance(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) { if (parentComponent && !parentComponent._unmounted) {
parentComponent.$children.splice( parentComponent.$children.splice(
parentComponent.$children.indexOf(instance.$proxy), parentComponent.$children.indexOf(instance.$proxy),

View File

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

View File

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