Comment laisser ChatGPT interpréter le code source de Vue3

Combat pratique

setup

Où est la fonction setup ? Nous ne connaissons pas le nom de sa fonction d'implémentation, nous avons donc demandé à 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 m'a dit que la fonction setup est dans le fichier packages/runtime -core/src/component.ts. Comme nous le savons tous, runtime-core est le code principal d'exécution de Vue3. Entrons et jetons un oeil. 🎜🎜D'après ce qu'il dit, nous avons trouvé les fonctions setupComponent et createComponentInstance, mais nous n'avons pas trouvé la fonction setupRenderEffect que ChatGPT ne connaît qu'avant 2021. Connaissance, le code Vue3 a subi de nombreux changements, mais ce n'est pas grave, cela n'affecte pas trop. 🎜🎜ChatGPT m'a dit que la fonction setupComponent est exécutée dans la fonction createComponentInstance createComponentInstance comme si son nom était de créer une instance de composant Take. un regard sur le code détaillé. 🎜🎜Copier directement sur ChatGPT : 🎜🎜 🎜🎜Nous avons lu le code selon l'explication de ChatGPT et avons constaté que createComponentInstance crée simplement une instance du composant et la renvoie. Il n'exécute pas setupComponent dans la fonction comme il l'a dit ci-dessus, stupide ChatGPT. 🎜🎜Ensuite, découvrez où setupComponent est appelé. 🎜🎜Vous pouvez rechercher le nom de la fonction dans packages/runtime-core/ et vous le trouverez rapidement. Dans la fonction mountComponent du fichier packages/runtime-core/src/renderer.ts. 🎜🎜mountComponent est une méthode de montage de composants devant laquelle se trouve un tas de logique de rendu personnalisée, qui ne sera pas abordée ici. 🎜rrreee🎜La fonction mountComponent appelle d'abord createComponentInstance, renvoie une instance de composant, puis transmet l'instance en tant que paramètre à setupComponent. À propos, nous avons également découvert la fonction setupRenderEffect que ChatGPT a perdue ici, qui est utilisée pour gérer certains effets secondaires de rendu. 🎜🎜Retour à la fonction setupComponent, les commentaires d'Evan nous disent qu'elle gère les accessoires et les slots. 🎜rrreee🎜Introduisez le code à ChatGPT : 🎜🎜🎜🎜Dans la fonction setupComponent, après avoir traité les accessoires et les emplacements, setupStatefulComponent est appelé selon qu'il s'agit ou non d'un composant avec état. 🎜🎜Alimentez directement l'intégralité du setupStatefulComponent dans ChatGPT : 🎜🎜🎜🎜C'est trop long Cela signifie probablement : 🎜

• 🎜Créé un cache proxy accessCache. savoir pourquoi il est utilisé. Vous pouvez demander à ChatGPT🎜
• 🎜Créer un objet proxy d'instance publique (proxy)🎜
• 🎜Exécuter la configuration du composant()🎜
ul>🎜L'opération suivante consiste à appeler les fonctions de rendu handleSetupResult et finishComponentSetup. Commençons par la logique de rendu. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!