O que acontecerá se você usar o ChatGPT para ler o código-fonte do Vue3?

Prefácio

ChatGPT tem se tornado muito popular recentemente. Hoje vou deixar ChatGPT me ajudar a ler o código fonte do Vue3.

Todos sabemos que o componente Vue3 tem uma setupfunção. Então, o que ele faz internamente?Siga o ChatGPT hoje para descobrir.

Combate real

setupOnde está a função? Não sabemos o nome de sua função de implementação, então perguntamos ao ChatGPT:

 

ChatGPT me diz que setupa função está no packages/runtime-core/src/component.tsarquivo. Como todos sabemos, runtime-coreé o código central do tempo de execução do Vue3. Vamos entrar e dar uma olhada.

Pelo que dizia, encontramos setupComponenta createComponentInstancefunção e, mas não setupRenderEffecta função, o ChatGPT só conhece o conhecimento antes de 2021. O código Vue3 passou por muitas mudanças, mas não importa, isso não afeta muito.

ChatGPT me diz que setupComponenta função é createComponentInstanceexecutada na função. createComponentInstanceVeja o nome para criar uma instância do componente. Veja o código detalhado.

Copie diretamente para ChatGPT:

Lemos o código conforme explicação do ChatGPT e descobrimos que createComponentInstanceapenas uma instância do componente foi criada e retornada. Não é executado na função como disse acima setupComponent, ChatGPT estúpido.

Então descubra setupComponentonde ele é chamado.

Você pode packages/runtime-core/pesquisar o nome da função e encontrá-lo rapidamente. em uma função packages/runtime-core/src/renderer.tsem um arquivo mountComponent.

mountComponentÉ um método de montagem de componentes.Há um monte de lógica de renderização personalizada na frente dele, que não será discutida neste artigo.

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

mountComponentA função é chamada primeiro createComponentInstance, retorna uma instância do componente e passa a instância como parâmetro setupComponent. A propósito, também encontramos uma função que o ChatGPT perdeu aqui setupRenderEffect, que é usada para lidar com alguns efeitos colaterais da renderização.

Voltando à setupComponentfunção, o comentário de Evan nos diz que ela lida com adereços e 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
}

Alimente o código para ChatGPT:

setupComponent Na função, após processar adereços e slots, ela é chamada com base no fato de ser um componente com estado setupStatefulComponent.

Alimente tudo diretamente  setupStatefulComponentpara ChatGPT:

 

 

Muito longo, provavelmente significa:

• Um cache de proxy accessCache foi criado. Não sei por que ele é usado. Você pode perguntar ao ChatGPT.
• Crie um objeto proxy de instância pública (proxy)
• Configuração do componente de execução()

As operações subsequentes devem chamar handleSetupResulte finishComponentSetupretornar a função de renderização. Vamos começar com a lógica de renderização.

resumo

Para resumir setuptoda a história:

• createComponentInstanceChamada para criar instância de componente a partir da montagem do componente
• Passe a instância do componente parasetupComponent
• setupComponentInicialize internamente adereços e slots
• setupStatefulComponentcomponente executivosetup
• Conclua o processo de configuração
• Função de renderização de retorno
• ...

Resumir

O ChatGPT é muito poderoso, mas também muito estúpido, afinal não está conectado à Internet e só possui dados anteriores a 2021. Pode ser usado para nos ajudar a ler códigos-fonte obscuros, mas só pode servir como uma função auxiliar e requer nosso próprio pensamento.

PS: Existem tantos códigos-fonte do vue que não consigo mais alimentá-los. Se você estiver interessado, experimente você mesmo.

---

Recentemente , fiquei acordado até tarde para preparar um resumo muito abrangente das instruções eficientes do ChatGPT [versão completa] . Se precisar, você pode obtê-lo gratuitamente por mensagem privada!