ChatGPT を使用して Vue3 のソース コードを読み取るとどうなりますか?

序文

最近ChatGPTが流行っているので、今日はChatGPTを使ってVue3のソースコードを読んでみようと思います。

Vue3 コンポーネントにはsetup関数があることは誰もが知っています。では、内部的には何をしているのでしょうか? 今すぐ ChatGPT をフォローして調べてください。

実戦

setup関数はどこにありますか?その実装関数の名前がわからないので、ChatGPT に尋ねました。

 

setupChatGPT は、関数がpackages/runtime-core/src/component.tsファイル内にあることを示します。ご存知のとおり、runtime-coreこれは Vue3 のランタイム コア コードです。中に入って見てみましょう。

それによると、setupComponentandcreateComponentInstance関数は見つかりましたが、setupRenderEffect関数は見つかりませんでした。ChatGPT は 2021 年以前の知識しか知りません。Vue3 コードには多くの変更が加えられていますが、それは問題ではありません。これはあまり影響しません。

ChatGPTでは関数内でsetupComponent関数が実行されていることがわかります。名前を見てコンポーネントのインスタンスを作成します。詳細なコードを見てください。createComponentInstancecreateComponentInstance

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 のコメントによれば、関数はプロップとスロットを処理することがわかります。

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 関数では、プロパティとスロットを処理した後、ステートフル コンポーネントかどうかに基づいて呼び出されますsetupStatefulComponent。

全体を直接 setupStatefulComponentChatGPT にフィードします。

 

 

長すぎるということは、おそらく次のことを意味します:

• プロキシ キャッシュ accessCache が作成されました。なぜ使用されるのかわかりません。ChatGPT に問い合わせてください。
• パブリック インスタンス プロキシ オブジェクト (プロキシ) を作成する
• 実行コンポーネントのセットアップ()

後続の操作は、レンダリング関数を呼び出しhandleSetupResultて返します。finishComponentSetupレンダリングロジックから始めましょう。

まとめ

setupストーリー全体を要約すると、次のようになります。

• コンポーネントのマウントから始まるcreateComponentInstanceコンポーネント インスタンスを作成する呼び出し
• コンポーネントインスタンスを渡すsetupComponent
• setupComponentプロップとスロットを内部的に初期化する
• setupStatefulComponent実行コンポーネントsetup
• セットアッププロセスを完了する
• レンダリング関数を返す
• ...

要約する

ChatGPT は非常に強力ですが、非常に愚かでもあり、結局のところ、インターネットに接続されておらず、2021 年以前のデータしか保持していません。難解なソース コードを読むのに役立ちますが、補助的な機能としてのみ機能するため、独自の思考が必要です。

PS: vue のソースコードが多すぎてこれ以上は載せられないので、興味のある方はぜひ試してみてください。

---

最近、私はChatGPT の効率的な手順の非常に包括的なまとめ [完全版] を準備するために夜更かししました。必要な場合は、プライベート メッセージで無料で入手できます。