Vue3 功能拆解⑪ expose options&api

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

export function applyOptions(instance: ComponentInternalInstance) {
  const options = resolveMergedOptions(instance)
  const publicThis = instance.proxy! as any
  const ctx = instance.ctx
  shouldCacheAccess = false

  const {
    // ...
    // public API
    expose,
    // ...
  } = options


  // ...

  if (isArray(expose)) {
    if (expose.length) {
      const exposed = instance.exposed || (instance.exposed = {})
      expose.forEach(key => {
        Object.defineProperty(exposed, key, {
          get: () => publicThis[key],
          set: val => (publicThis[key] = val)
        })
      })
    } else if (!instance.exposed) {
      instance.exposed = {}
    }
  }

  // ...
}

1
2
3

 // 1. create public instance / render proxy
  // also mark it raw so it's never observed
  instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

 export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   // get proxy
  get({ _: instance }: ComponentRenderContext, key: string) {
    const { ctx, setupState, data, props, accessCache, type, appContext } = instance

    let normalizedProps
    if (key[0] !== '$') {
      // 1. 非 $xx 的属性访问顺序: setupState -> data -> ctx -> props
      // setupState 是 setup() 返回对象时的值，或 <script setup> 标签中的状态
      // 并且这个会记录每次访问时的 key 对应在哪个对象上，这样下次就不用再过一篇这
      // 里繁琐的逻辑了
      // ...
    }

    // 2. 下面是针对 this.$xxx 的访问，顺序是：
    // publicPropertiesMap -> cssModule -> ctx -> globalProperties
    // 找到对应 key 的 get 方法, 注意点
    //   1) this.$attrs 的访问会触发 track
    //   2) globalProperties 参过 app.config.globalProperties 注册的全局属性
    const publicGetter = publicPropertiesMap[key]
    let cssModule, globalProperties
    // public $xxx properties
    // ...
  },

   // set proxy
  set(
    { _: instance }: ComponentRenderContext,
    key: string,
    value: any
  ): boolean {
    const { data, setupState, ctx } = instance
    // 设置优先级： setupState -> options data
    if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
      setupState[key] = value
    } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
      data[key] = value
    } else if (hasOwn(instance.props, key)) {
      // ...不允许直接修改 props
      return false
    }

    if (key[0] === '$' && key.slice(1) in instance) {
      // ...不允许直接修改 $xxx 上的属性
      return false
    } else {
      // 开发时，可以修改 app.config.globalProperties 上属性的值
      if (__DEV__ && key in instance.appContext.config.globalProperties) {
        Object.defineProperty(ctx, key, {
          enumerable: true,
          configurable: true,
          value
        })
      } else {
        ctx[key] = value
      }
    }
    return true
  },

  has(
    {
      _: { data, setupState, accessCache, ctx, appContext, propsOptions }
    }: ComponentRenderContext,
    key: string
  ) {
    let normalizedProps
    // 检测属性有无时的代理：
    // 缓存(取值时缓存的) -> data -> setup state -> props -> ctx -> $xxx -> globalProperties
    return (
      accessCache![key] !== undefined ||
      (data !== EMPTY_OBJ && hasOwn(data, key)) ||
      (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||
      ((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||
      hasOwn(ctx, key) ||
      hasOwn(publicPropertiesMap, key) ||
      hasOwn(appContext.config.globalProperties, key)
    )
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

export const publicPropertiesMap: PublicPropertiesMap = extend(
  Object.create(null),
  {
    $: i => i,
    $el: i => i.vnode.el,
    $data: i => i.data,
    $props: i => (__DEV__ ? shallowReadonly(i.props) : i.props),
    $attrs: i => (__DEV__ ? shallowReadonly(i.attrs) : i.attrs),
    $slots: i => (__DEV__ ? shallowReadonly(i.slots) : i.slots),
    $refs: i => (__DEV__ ? shallowReadonly(i.refs) : i.refs),
    $parent: i => getPublicInstance(i.parent),
    $root: i => getPublicInstance(i.root),
    $emit: i => i.emit,
    $options: i => (__FEATURE_OPTIONS_API__ ? resolveMergedOptions(i) : i.type),
    $forceUpdate: i => () => queueJob(i.update),
    $nextTick: i => nextTick.bind(i.proxy!),
    $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP)
  } as PublicPropertiesMap
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 export const setRef = (
  rawRef: VNodeNormalizedRef,
  oldRawRef: VNodeNormalizedRef | null,
  parentSuspense: SuspenseBoundary | null,
  vnode: VNode,
  isUnmount = false
) => {
  // ... rawRef 是数组处理

  // 异步组件判断，如果是异步的需要等异步组件完成渲染才可以
  // isAsyncWrapper:
  // export const isAsyncWrapper = (i: ComponentInternalInstance | VNode): boolean =>
  // !!(i.type as ComponentOptions).__asyncLoader

  // 有状态的组件：对象组件, vnode.ts:createVNode 里面的检测
  // isObject(type) ? ShapeFlags.STATEFUL_COMPONENT : ...
  // 重点就在这：先取 expose proxy 然后取 component.proxy
  const refValue =
    vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
      ? getExposeProxy(vnode.component!) || vnode.component!.proxy
      : vnode.el
  const value = isUnmount ? null : refValue

  // ...

  // <div ref="formRef" /> -> this.$refs.formRef
  if (isString(ref)) {
    // refs[ref] = value ...
  } else if (isRef(ref)) {
    // 这个正是这里使用的案例所执行的分支
  }

  // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

export function getExposeProxy(instance: ComponentInternalInstance) {
  if (instance.exposed) {
    return (
      instance.exposeProxy ||
        (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
          get(target, key: string) {
            console.log('key = ' + key);
            if (key in target) {
              return target[key]
            } else if (key in publicPropertiesMap) {
              return publicPropertiesMap[key](instance)
            }
          }
        }))
    )
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

export const publicPropertiesMap: PublicPropertiesMap = extend(
  Object.create(null),
  {
    // ...
    $el: i => i.vnode.el,
    // ...
    $parent: i => getPublicInstance(i.parent),
    $root: i => getPublicInstance(i.root),
    // ...
  } as PublicPropertiesMap
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/**
 ,* #2437 In Vue 3, functional components do not have a public instance proxy but
 ,* they exist in the internal parent chain. For code that relies on traversing
 ,* public $parent chains, skip functional ones and go to the parent instead.
 ,*/
const getPublicInstance = (
  i: ComponentInternalInstance | null
): ComponentPublicInstance | ComponentInternalInstance['exposed'] | null => {
  if (!i) return null
  // 对象组件，跳过函数组件，如上面的注释，函数组件并没有公共的实例，但是它们
  // 依旧在 parent 链上
  if (isStatefulComponent(i)) return i.exposed ? i.exposed : i.proxy
  // 递归取父级组件实例，这个一直会找到 root
  return getPublicInstance(i.parent)
}

1
2

// createComponentInstance(vnode, parent, suspense) ->
instance.root = parent ? parent.root : instance

1
2
3
4
5
6

const expose: SetupContext['expose'] = exposed => {
  if (__DEV__ && instance.exposed) {
    warn(`expose() should be called only once per setup().`)
  }
  instance.exposed = exposed || {}
}