让ChatGPT解读Vue3源码过程解析

年少再无少年

前言

ChatGPT 最近十分火爆，今天我也来让 ChatGPT 帮我阅读一下 Vue3 的源代码。
都知道 Vue3 组件有一个

1. setup

复制代码

函数。那么它内部做了什么呢，今天跟随 ChatGPT 来一探究竟。

实战


setup

1. setup

复制代码

函数在什么位置呢，我们不知道他的实现函数名称，于是问一下 ChatGPT：

ChatGPT 告诉我，

1. setup

复制代码

函数在

1. packages/runtime-core/src/component.ts

复制代码

文件中。众所周知，

1. runtime-core

复制代码

是 Vue3 的运行时核心代码。我们进去看一眼。
按照它所说的，我们找到了

1. setupComponent

复制代码

和

1. createComponentInstance

复制代码

函数，并没有找到

1. setupRenderEffect

复制代码

函数，ChatGPT 的只知道 2021 年以前的知识，Vue3 代码经过了很多变动，不过没关系，这不影响太多。
ChatGPT 告诉我，

1. setupComponent

复制代码

函数是在

1. createComponentInstance

复制代码

函数中执行的，

1. createComponentInstance

复制代码

看名字是创建组件实例，看一下详细代码。
直接复制给 ChatGPT：

我们根据 ChatGPT 的解释来阅读代码，发现

1. createComponentInstance

复制代码

只是创建了组件的实例并返回。并没有像它上面说的在函数中执行了

1. setupComponent

复制代码

，笨笨的 ChatGPT。
那就自己找一下

1. setupComponent

复制代码

是在哪里被调用的。
可以

1. packages/runtime-core/

复制代码

搜一下函数名，很快就找到了。在

1. packages/runtime-core/src/renderer.ts

复制代码

文件中的

1. mountComponent

复制代码

函数中。

1. mountComponent

复制代码

是挂载组件的方法，前面还有一堆自定义渲染器的逻辑，不在此篇展开。

1.   const mountComponent: MountComponentFn = (...args) => {
   
2.     const instance: ComponentInternalInstance =
   
3.       compatMountInstance ||
   
4.       (initialVNode.component = createComponentInstance(
   
5.         initialVNode,
   
6.         parentComponent,
   
7.         parentSuspense
   
8.       ))
   
9.     // ... 省略代码
   
10.     // resolve props and slots for setup context
    
11.     if (!(__COMPAT__ && compatMountInstance)) {
    
12.         // ...这里调用了setupComponent，传入了实例，还写了注释，感人
    
13.       setupComponent(instance)
    
14.     }
    
15.     // setupRenderEffect 居然也在这
    
16.     setupRenderEffect(
    
17.       instance,
    
18.       initialVNode,
    
19.       container,
    
20.       anchor,
    
21.       parentSuspense,
    
22.       isSVG,
    
23.       optimized
    
24.     )
    
25.   }

复制代码

1. mountComponent

复制代码

函数先调用了

1. createComponentInstance

复制代码

， 返回个组件实例，又把实例当作参数传给了

1. setupComponent

复制代码

。顺便我们还在这发现了 ChatGPT 搞丢的

1. setupRenderEffect

复制代码

函数，它是用来处理一些渲染副作用的。
回到

1. setupComponent

复制代码

函数，Evan 的注释告诉我们它是处理 props 和 slots 的。

1. export function setupComponent(
   
2.   instance: ComponentInternalInstance,
   
3.   isSSR = false
   
4. ) {
   
5.   isInSSRComponentSetup = isSSR
   
6.   const { props, children } = instance.vnode
   
7.   const isStateful = isStatefulComponent(instance)
   
8.   initProps(instance, props, isStateful, isSSR)
   
9.   initSlots(instance, children)
   
10.   const setupResult = isStateful
    
11.     ? setupStatefulComponent(instance, isSSR)
    
12.     : undefined
    
13.   isInSSRComponentSetup = false
    
14.   return setupResult
    
15. }

复制代码

把代码喂给 ChatGPT：

1. setupComponent

复制代码

函数中，处理完 props 和 slots 后，根据是否是有状态组件调用了

1. setupStatefulComponent

复制代码

。
直接整个

1. setupStatefulComponent

复制代码

喂给 ChatGPT：

太长了，大概意思：

• 创建了代理缓存accessCache，干嘛用的咱也不知道，可以问 ChatGPT
  
• 创建公共实例代理对象（proxy）
  
• 执行组件的 setup()
  

后续操作是调用

1. handleSetupResult

复制代码

和

1. finishComponentSetup

复制代码

返回渲染函数。开始走渲染逻辑了。

小结

小结一下

1. setup

复制代码

的始末：

• 从组件挂载开始调用
  1. createComponentInstance

  复制代码
  创建组件实例
  
• 传递组件实例给
  1. setupComponent

  复制代码
• 1. setupComponent

  复制代码
  内部初始化 props 和 slots
  
• 1. setupStatefulComponent

  复制代码
  执行组件的
  1. setup

  复制代码
• 完成 setup 流程
  
• 返回渲染函数
  
• ...
  

总结

ChatGPT 很强大，也很笨，毕竟它不联网，且只有 2021 年以前的数据。可用来帮助我们读一下晦涩的源码还是可以的，但也只能辅助作用，还需要自己的思考。
以上就是让ChatGPT解读Vue3源码过程解析的详细内容，更多关于ChatGPT读Vue3源码的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/276287.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！