¿Qué pasará si usas ChatGPT para leer el código fuente de Vue3?

Prefacio

ChatGPT ha sido muy popular recientemente, hoy dejaré que ChatGPT me ayude a leer el código fuente de Vue3.

Todos sabemos que el componente Vue3 tiene una setupfunción. Entonces, ¿qué hace internamente? Sigue ChatGPT hoy para descubrirlo.

combate real

setup¿Dónde está la función? No sabemos el nombre de su función de implementación, así que le preguntamos a ChatGPT:

 

ChatGPT me dice que setupla función está en packages/runtime-core/src/component.tsel archivo. Como todos sabemos, runtime-corees el código central de ejecución de Vue3. Entremos y echemos un vistazo.

Según lo que dijo, encontramos setupComponentla createComponentInstancefunción y, pero no setupRenderEffectla función, ChatGPT solo conoce el conocimiento antes de 2021. El código Vue3 ha pasado por muchos cambios, pero no importa, esto no afecta demasiado.

ChatGPT me dice que setupComponentla función se createComponentInstanceejecuta en la función. createComponentInstanceMire el nombre para crear una instancia del componente. Mire el código detallado.

Copie directamente a ChatGPT:

Leemos el código de acuerdo con la explicación de ChatGPT y descubrimos que createComponentInstancesolo se creó y devolvió una instancia del componente. No se ejecuta en la función como decía arriba setupComponent, estúpido ChatGPT.

Luego averigüe setupComponentdónde se llama.

Puede packages/runtime-core/buscar el nombre de la función y encontrarla rápidamente. en una función packages/runtime-core/src/renderer.tsen un archivo mountComponent.

mountComponentEs un método para montar componentes, y delante de él hay un montón de lógica de renderizado personalizada, que no se discutirá en este artículo.

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

mountComponentLa función se llama primero createComponentInstance, devuelve una instancia de componente y pasa la instancia como parámetro setupComponent. Por cierto, también encontramos una función que ChatGPT perdió aquí setupRenderEffect, que se utiliza para manejar algunos efectos secundarios de renderizado.

Volviendo a setupComponentla función, el comentario de Evan nos dice que maneja accesorios y espacios.

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
}

Introduzca el código en ChatGPT:

setupComponent En la función, después de procesar accesorios y ranuras, se llama según si es un componente con estado setupStatefulComponent.

Envíe todo directamente  setupStatefulComponenta ChatGPT:

 

 

Demasiado largo, probablemente signifique:

• Se ha creado un proxy cache accessCache. No sé para qué se utiliza. Puedes preguntarle a ChatGPT.
• Crear un objeto proxy de instancia pública (proxy)
• Configuración del componente de ejecución()

Las operaciones posteriores son llamar handleSetupResulty finishComponentSetupdevolver la función de representación. Comencemos con la lógica de renderizado.

resumen

Para resumir setuptoda la historia:

• createComponentInstanceLlamada para crear una instancia de componente a partir del montaje del componente
• Pasar la instancia del componente asetupComponent
• setupComponentInicializar internamente accesorios y ranuras
• setupStatefulComponentcomponente ejecutivosetup
• Completa el proceso de configuración
• Función de renderizado de retorno
• ...

Resumir

ChatGPT es muy poderoso pero también muy estúpido: después de todo, no está conectado a Internet y solo tiene datos antes de 2021. Puede usarse para ayudarnos a leer código fuente oscuro, pero solo puede servir como una función auxiliar y requiere nuestro propio pensamiento.

PD: Hay demasiados códigos fuente de Vue, por lo que ya no puedo alimentarlos. Si está interesado, pruébelo usted mismo.

---

Recientemente , me quedé despierto hasta tarde para preparar un resumen muy completo de las instrucciones eficientes de ChatGPT [versión completa] . Si lo necesita, ¡puede obtenerlo gratis por mensaje privado!