本文正在参加✍技术视角深入 征文活动

好多同学来打卡，新来的同学可以点点关注，后续更多前端、Node、Rust 的文章，不要错过！

前言

最近十分火爆，今天我也来让 帮我阅读一下 Vue3 的源代码。

都知道 Vue3 组件有一个 setup函数。那么它内部做了什么呢，今天跟随 来一探究竟。

实战setup

setup 函数在什么位置呢，我们不知道他的实现函数名称，于是问一下 ：

告诉我，setup 函数在/-core/src/.ts 文件中。众所周知，-core是 Vue3 的运行时核心代码。我们进去看一眼。

按照它所说的，我们找到了 和 nce 函数，并没有找到 函数， 的只知道 2021 年以前的知识，Vue3 代码经过了很多变动，不过没关系，这不影响太多。

告诉我， 函数是在nce函数中执行的，nce看名字是创建组件实例，看一下详细代码。

直接复制给 ：

我们根据 的解释来阅读代码，发现nce只是创建了组件的实例并返回。并没有像它上面说的在函数中执行了 ，笨笨的 。

那就自己找一下是在哪里被调用的。

可以/-core/搜一下函数名，很快就找到了。在/-core/src/.ts文件中的函数中。

是挂载组件的方法，前面还有一堆自定义渲染器的逻辑，不在此篇展开。

用chatgpt写vba代码_编写代码_代码写出来怎么用

  const mountComponent: MountComponentFn = (...args) => {
    const instance: ComponentInternalInstance =
      compatMountInstance ||
      (initialVNode.component = createComponentInstance(
        initialVNode,
        parentComponent,
        parentSuspense
      ))
    // ... 省略代码
    // resolve props and slots for setup context
    if (!(__COMPAT__ && compatMountInstance)) {
        // ...这里调用了setupComponent，传入了实例，还写了注释，感人
      setupComponent(instance)
    }
    // setupRenderEffect 居然也在这
    setupRenderEffect(
      instance,
      initialVNode,
      container,
      anchor,
      parentSuspense,
      isSVG,
      optimized
    )
  }

函数先调用了nce， 返回个组件实例，又把实例当作参数传给了 。顺便我们还在这发现了 搞丢的函数，它是用来处理一些渲染副作用的。

回到 函数，Evan 的注释告诉我们它是处理 props 和 slots 的。

export function setupComponent(
  instance: ComponentInternalInstance,
  isSSR = false
) {
  isInSSRComponentSetup = isSSR
  const { props, children } = instance.vnode
  const isStateful = isStatefulComponent(instance)
  initProps(instance, props, isStateful, isSSR)
  initSlots(instance, children)
  const setupResult = isStateful
    ? setupStatefulComponent(instance, isSSR)
    : undefined
  isInSSRComponentSetup = false
  return setupResult
}

把代码喂给 ：

函数中，处理完 props 和 slots 后，根据是否是有状态组件调用了nt。

直接整个 nt喂给 ：

太长了，大概意思：

后续操作是调用 和 返回渲染函数。开始走渲染逻辑了。

小结

小结一下setup的始末：

总结

很强大，也很笨，毕竟它不联网，且只有 2021 年以前的数据。可用来帮助我们读一下晦涩的源码还是可以的，但也只能辅助作用，还需要自己的思考。

PS: vue 源码太多了，喂不动了，有兴趣的自己试一下。

如果你觉得内容对你有帮助，欢迎「转发」 、 「点赞」 、 「收藏」。