ChatGPT가 Vue3 소스 코드를 해석하도록 하는 방법

실용적인 전투

setup

setup 기능은 어디에 있나요? 구현 기능 이름을 몰라서 ChatGPT에 문의했습니다: setup 函数在什么位置呢，我们不知道他的实现函数名称，于是问一下 ChatGPT：

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

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

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

直接复制给 ChatGPT：

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

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

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

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

  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
    )
  }

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

回到 setupComponent函数，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
}

把代码喂给 ChatGPT：

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

直接整个 setupStatefulComponent喂给 ChatGPT：

太长了，大概意思：

• 创建了代理缓存accessCache，干嘛用的咱也不知道，可以问 ChatGPT

• 创建公共实例代理对象（proxy）

• 执行组件的 setup()

后续操作是调用 handleSetupResult 和 finishComponentSetup

🎜🎜ChatGPT에서 setup 기능이 다음과 같다고 말했습니다. packages/runtime -core/src/comComponent.ts 파일에 있습니다. 우리 모두 알고 있듯이 runtime-core는 Vue3의 런타임 핵심 코드입니다. 들어가서 살펴보자. 🎜🎜말씀에 따르면 setupComponent 및 createComponentInstance 함수는 찾았지만 setupRenderEffect 함수는 찾지 못했습니다. ChatGPT는 2021년 이전에만 알고 있습니다. 지식에 따르면 Vue3 코드는 많은 변경을 거쳤지만 문제가 되지 않습니다. 이는 큰 영향을 미치지 않습니다. 🎜🎜ChatGPT에서는 createComponentInstance 함수에서 setupComponent 함수가 실행된다고 했는데, createComponentInstance라는 이름이 구성 요소 인스턴스를 생성하는 것처럼 보입니다. 자세한 코드를 살펴보세요. 🎜🎜ChatGPT에 직접 복사: 🎜🎜 🎜🎜ChatGPT의 설명에 따라 코드를 읽어보니 createComponentInstance가 해당 구성 요소의 인스턴스를 생성하고 반환하는 역할만 하는 것으로 나타났습니다. 위에서 말한 것처럼 함수에서 setupComponent를 실행하지 않습니다. 멍청한 ChatGPT입니다. 🎜🎜그런 다음 setupComponent가 호출되는 위치를 알아보세요. 🎜🎜 packages/runtime-core/에서 함수명을 검색하시면 빠르게 찾으실 수 있습니다. packages/runtime-core/src/renderer.ts 파일의 mountComponent 함수에서. 🎜🎜mountComponent는 구성요소를 마운트하는 방법입니다. 그 앞에는 다양한 사용자 정의 렌더러 로직이 있지만 여기서는 이에 대해 논의하지 않습니다. 🎜rrreee🎜 mountComponent 함수는 먼저 createComponentInstance를 호출하고 구성 요소 인스턴스를 반환한 다음 해당 인스턴스를 setupComponent에 매개 변수로 전달합니다. 그런데 우리는 ChatGPT가 여기에서 잃어버린 setupRenderEffect 함수도 발견했는데, 이는 일부 렌더링 부작용을 처리하는 데 사용됩니다. 🎜🎜setupComponent 함수로 돌아가면 Evan의 설명에 소품과 슬롯을 처리한다고 나와 있습니다. 🎜rrreee🎜ChatGPT에 코드 피드: 🎜🎜🎜🎜setupComponent 함수에서는 props와 Slots를 처리한 후 Stateful 컴포넌트인지 여부에 따라 setupStatefulComponent가 호출됩니다. 🎜🎜전체 setupStatefulComponent를 ChatGPT에 직접 피드합니다. 🎜🎜🎜🎜너무 깁니다. 다음 의미일 수 있습니다. 🎜

• 🎜프록시 캐시 accessCache를 생성하지 않았습니다. 왜 사용되는지 알아보세요. ChatGPT🎜
• 🎜공용 인스턴스 프록시 개체(프록시) 만들기🎜
• 🎜구성 요소의 setup()을 실행하세요🎜

🎜다음 작업은 handleSetupResult 및 finishComponentSetup 반환 렌더링 함수를 호출하는 것입니다. 렌더링 논리부터 시작해 보겠습니다. 🎜

위 내용은 ChatGPT가 Vue3 소스 코드를 해석하도록 하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!