Что произойдет, если вы используете ChatGPT для чтения исходного кода Vue3?

Предисловие

ChatGPT в последнее время стал очень популярен. Сегодня я позволю ChatGPT помочь мне прочитать исходный код Vue3.

Мы все знаем, что у компонента Vue3 есть 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функции, комментарий Эвана говорит нам, что она обрабатывает реквизиты и слоты.

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.

Передайте все это прямо  setupStatefulComponentв ChatGPT:

 

 

Слишком долго, вероятно, означает:

• Создан прокси-кеш accessCache. Не знаю, для чего он используется. Можно спросить в ChatGPT.
• Создайте общедоступный прокси-объект экземпляра (прокси)
• Настройка исполнительного компонента()

Последующие операции заключаются в вызове handleSetupResultи finishComponentSetupвозврате функции рендеринга. Начнем с логики рендеринга.

краткое содержание

Подводя итог setupвсей истории:

• createComponentInstanceВызов для создания экземпляра компонента , начиная с монтирования компонента.
• Передать экземпляр компонента вsetupComponent
• setupComponentВнутренняя инициализация реквизита и слотов
• setupStatefulComponentисполнительный компонентsetup
• Завершите процесс установки
• Возврат функции рендеринга
• ...

Подведем итог

ChatGPT — очень мощный, но и очень глупый инструмент, ведь он не подключен к Интернету и имеет данные только до 2021 года. Его можно использовать, чтобы помочь нам прочитать непонятный исходный код, но он может служить лишь вспомогательной функцией и требует нашего собственного мышления.

PS: Исходных кодов vue слишком много, поэтому я больше не могу их скармливать. Если интересно, попробуйте сами.

---

Недавно я засиделся допоздна, чтобы подготовить очень подробное изложение эффективных инструкций ChatGPT [полная версия] . Если вам это нужно, вы можете получить его бесплатно личным сообщением!