Vue3 源码解析：setup 揭秘与 expose 的妙用

Posted 2021-09-07 Originalix

在前几篇文章中我们一起学习了 Vue3 中新颖的 Composition API，而今天笔者要带大家一起看一下 Vue3 中的另一个新鲜的写法 —— setup。

在绝大多数情况，我们书写的组件都是有状态的组件，而这类组件在初始化的过程中会被标记为 stateful comonents，当 Vue3 检测到我们在处理这类有状态组件时，就会调用函数 setupStatefulComponent ，来初始化一个状态化组件。处理组件部分的源码位置在: @vue/runtime-core/src/component.ts 。

setupStatefulComponent

接下来笔者就带着大家一起来剖析一下 setupStatefulComponent 的过程：

function setupStatefulComponent(
  instance: ComponentInternalInstance,
  isSSR: boolean
) {
  const Component = instance.type as ComponentOptions

  if (__DEV__) { /* 检测组件名称、指令、编译选项等等，有错误则报警 */ }
    
  // 0. 创建一个渲染代理的属性的访问缓存
  instance.accessCache = Object.create(null)
  // 1. 创建一个公共的示例或渲染器代理
  // 它将被标记为 raw，所以它不会被追踪
  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)

  // 2. 调用 setup()
  const { setup } = Component
  if (setup) {
    const setupContext = (instance.setupContext =
      setup.length > 1 ? createSetupContext(instance) : null)

    currentInstance = instance
    pauseTracking()
    const setupResult = callWithErrorHandling(
      setup,
      instance,
      ErrorCodes.SETUP_FUNCTION,
      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
    )
    resetTracking()
    currentInstance = null

    if (isPromise(setupResult)) {
      if (isSSR) {
        // 返回一个 promise，因此服务端渲染可以等待它执行。
        return setupResult
          .then((resolvedResult: unknown) => {
            handleSetupResult(instance, resolvedResult, isSSR)
          })
          .catch(e => {
            handleError(e, instance, ErrorCodes.SETUP_FUNCTION)
          })
      }
    } else {
      // 捕获 Setup 执行结果
      handleSetupResult(instance, setupResult, isSSR)
    }
  } else {
    // 完成组件初始化
    finishComponentSetup(instance, isSSR)
  }
}

组件一开始会初始化一个 Component 变量，其中保存着组件的选项。接下来如果是 DEV 环境，则会开始检测组件中的各种选项的命名，比如 name、components、directives 等，如果检测有问题，就会在开发环境报出警告。

在检测完毕后，会开始正经的初始化过程，首先会在实例上创建一个 accessCache 的属性，该属性用以缓存渲染器代理属性，以减少读取次数。之后会在组件实例上初始化一个代理属性，这个代理属性代理了组件的上下文，并且将它设置为观察原始值，这样这个代理对象将不会被追踪。

之后就开始处理我们本文关心的 setup 逻辑了。首先从组件中取出 setup 函数，这里判断是否存在 setup 函数，如果不存在，则直接跳转到底部逻辑，执行 finishComponentSetup，完成组件初始化。否则就会进入 if (setup) 之后的分支条件中。

是否执行 createSetupContext 生成 setup 的上下文对象，取决于 setup 函数中形参的数量是否大于 1。

这里需要注意的一个知识点是：在 function 函数对象上调用 length 时，返回值是这个函数的形参数量。

举个例子：

setup() // setup.length === 0

setup(props) // setup.length === 1

setup(props, { emit, attrs }) // setup.length === 2

默认情况下，props 是调用 setup 时必传的参数，所以是否需要去生成 setup 的上下文的条件就是 setup.length > 1 。

那么顺着代码逻辑，我们一起来看一下 setup 上下文中究竟有些什么东西。

export function createSetupContext(
  instance: ComponentInternalInstance
): SetupContext {
  const expose: SetupContext[\'expose\'] = exposed => {
    instance.exposed = proxyRefs(exposed)
  }

  if (__DEV__) {
    /* DEV 逻辑忽略，对上下文选项设置 getter */
  } else {
    return {
      attrs: instance.attrs,
      slots: instance.slots,
      emit: instance.emit,
      expose
    }
  }
}

expose 的妙用

看到这段 createSetupContext 函数的逻辑，我们发现 setup 上下文中就如文档中描述的一样，有 attrs、slots、emit 这三种熟悉的属性，而在这里惊奇的发现竟然还有一个文档中未说明的 expose 属性返回。

expose 是早先 Vue RFC 中的一个提案，expose 的设想是提供一个像 expose({ ...publicMembers }) 这样的组合式 API，这样组件的作者就可以在 setup() 中使用该 API 来清除地控制哪些内容会明确地公开暴露给组件使用者。

当你在封装组件时，如果嫌 ref 中暴露的内容过多，不妨用 expose 来约束一下输出。当然这还仅仅是一个 RFC 提案，感兴趣的小伙伴可以偷偷尝鲜哦。

import { ref } from \'vue\'
export default {
  setup(_, { expose }) {
    const count = ref(0)

    function increment() {
      count.value++
    }
    
    // 仅仅暴露 increment 给父组件
    expose({
      increment
    })

    return { increment, count }
  }
}

例如当你像上方代码一样使用 expose 时，父组件获取的 ref 对象里只会有 increment 属性，而 count 属性将不会暴露出去。

执行 setup 函数

在处理完 setupContext 的上下文后，组件会停止依赖收集，并且开始执行 setup 函数。

const setupResult = callWithErrorHandling(
  setup,
  instance,
  ErrorCodes.SETUP_FUNCTION,
  [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
)

Vue 会通过 callWithErrorHandling 调用 setup 函数，这里我们可以看最后一行，是作为 args 参数传入的，与上文描述一样，props 会始终传入，若是 setup.length <= 1 , setupContext 则为 null。

调用完 setup 之后，会重置依赖收集状态。接下来判断 setupResult 的返回值类型。

如果 setup 函数的返回值是 promise 类型，并且是服务端渲染的，则会等待继续执行。否则就会报错，说当前版本的 Vue 并不支持 setup 返回 promise 对象。

如果不是 promise 类型返回值，则会通过 handleSetupResult 函数来处理返回结果。

export function handleSetupResult(
  instance: ComponentInternalInstance,
  setupResult: unknown,
  isSSR: boolean
) {
  if (isFunction(setupResult)) {
    // setup 返回了一个行内渲染函数
    if (__NODE_JS__ && (instance.type as ComponentOptions).__ssrInlineRender) {
      // 当这个函数的名字是 ssrRender (通过 SFC 的行内模式编译)
      // 将函数作为服务端渲染函数
      instance.ssrRender = setupResult
    } else {
      // 否则将函数作为渲染函数
      instance.render = setupResult as InternalRenderFunction
    }
  } else if (isObject(setupResult)) {
    // 将返回对象转换为响应式对象，并设置为实例的 setupState 属性
    instance.setupState = proxyRefs(setupResult)
  }
  finishComponentSetup(instance, isSSR)
}

在 handleSetupResult 这个结果捕获函数中，首先判断 setup 返回结果的类型，如果是一个函数，并且又是服务端的行内模式渲染函数，则将该结果作为 ssrRender 属性；而在非服务端渲染的情况下，会直接当做 render 函数来处理。

接着会判断 setup 返回结果如果是对象，就会将这个对象转换成一个代理对象，并设置为组件实例的 setupState 属性。

最终还是会跟其他没有 setup 函数的组件一样，调用 finishComponentSetup 完成组件的创建。

finishComponentSetup

这个函数的主要作用是获取并为组件设置渲染函数，对于模板（template）以及渲染函数的获取方式有以下三种规范行为：

1、渲染函数可能已经存在，通过 setup 返回了结果。例如我们在上一节讲的 setup 的返回值为函数的情况。

2、如果 setup 没有返回，则尝试获取组件模板并编译，从 Component.render 中获取渲染函数，

3、如果这个函数还是没有渲染函数，则将 instance.render 设置为空，以便它能从 mixins/extend 等方式中获取渲染函数。

这个在这种规范行为的指导下，首先判断了服务端渲染的情况，接着判断没有 instance.render 存在的情况，当进行这种判断时已经说明组件并没有从 setup 中获得渲染函数，在进行第二种行为的尝试。从组件中获取模板，设置好编译选项后调用 Component.render = compile(template, finalCompilerOptions) 进行编译，这部分编译的知识在我的第一篇文章编译流程中有过详细介绍。

最后将编译后的渲染函数赋值给组件实例的 render 属性，如果没有则赋值为 NOOP 空函数。

接着判断渲染函数是否是使用了 with 块包裹的运行时编译的渲染函数，如果是这种情况则会将渲染代理设置为一个不同的 has handler 代理陷阱，它的性能更强并且能够去避免检测一些全局变量。

至此组件的初始化完毕，渲染函数也设置结束了。

export function finishComponentSetup(
  instance: ComponentInternalInstance,
  isSSR: boolean,
  skipOptions?: boolean
) {
  const Component = instance.type as ComponentOptions

  // 模板 / 渲染函数的规范行为
  // 1、渲染函数可能已经存在，通过 setup 返回
  // 2、除此之外尝试使用 `Component.render` 当做渲染函数
  // 3、如果这个函数没有渲染函数，设置 `instance.render` 为空函数，以便它能从 mixins/extend 中获得渲染函数
  if (__NODE_JS__ && isSSR) {
    instance.render = (instance.render ||
      Component.render ||
      NOOP) as InternalRenderFunction
  } else if (!instance.render) {
    // 可以在 setup() 中设置
    if (compile && !Component.render) {
      const template = Component.template
      if (template) {
        const { isCustomElement, compilerOptions } = instance.appContext.config
        const {
          delimiters,
          compilerOptions: componentCompilerOptions
        } = Component
        const finalCompilerOptions: CompilerOptions = extend(
          extend(
            {
              isCustomElement,
              delimiters
            },
            compilerOptions
          ),
          componentCompilerOptions
        )
        Component.render = compile(template, finalCompilerOptions)
      }
    }

    instance.render = (Component.render || NOOP) as InternalRenderFunction

    // 对于使用 `with` 块的运行时编译的渲染函数，这个渲染代理需要不一样的 `has` handler 陷阱，它有更好的
    // 性能表现并且只允许白名单内的 globals 属性通过。
    if (instance.render._rc) {
      instance.withProxy = new Proxy(
        instance.ctx,
        RuntimeCompiledPublicInstanceProxyHandlers
      )
    }
  }
}

总结

今天笔者介绍了一个有状态的组件的初始化的过程，在 setup 函数初始化部分进行了仔细的讲解，我们不仅学习了 setup 上下文初始化的条件，也明确的知晓了 setup 上下文究竟给我们暴露了哪些属性，并且从中学到了一个新的 RFC 提案： expose 属性。

我们学习了 setup 函数执行的过程以及 Vue 是如何处理捕获 setup 的返回结果的。

最后我们讲解了组件初始化时，不论是否使用 setup 都会执行的 finishComponentSetup 函数，通过这个函数内部的逻辑我们了解了一个组件在初始化完毕时，渲染函数设置的规则。

最后，如果这篇文章能够帮助到你了解 Vue3 中 setup 的小细节，希望能给本文点一个喜欢❤️。如果想继续追踪后续文章，也可以关注我的账号或 follow 我的 github，再次谢谢各位可爱的看官老爷。