建设部特种作业证网站查询,wordpress主页菜单,常见的网站类型有哪些,wordpress topic页面ChatGPT 最近十分火爆#xff0c;今天我也来让 ChatGPT 帮我阅读一下 Vue3 的源代码。 都知道 Vue3 组件有一个 setup函数。那么它内部做了什么呢#xff0c;今天跟随 ChatGPT 来一探究竟。 实战 1.setup setup 函数在什么位置呢#xff0c;我们不知道他的实现函数名称…
ChatGPT 最近十分火爆今天我也来让 ChatGPT 帮我阅读一下 Vue3 的源代码。 都知道 Vue3 组件有一个 setup函数。那么它内部做了什么呢今天跟随 ChatGPT 来一探究竟。 实战 1.setup 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函数Evan 的注释告诉我们它是处理 props 和 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 }复制代码
2.把代码喂给 ChatGPT
setupComponent 函数中处理完 props 和 slots 后根据是否是有状态组件调用了setupStatefulComponent。
3.直接整个 setupStatefulComponent喂给 ChatGPT
太长了大概意思 创建了代理缓存accessCache干嘛用的咱也不知道可以问 ChatGPT 创建公共实例代理对象proxy 执行组件的 setup() 后续操作是调用 handleSetupResult 和 finishComponentSetup 返回渲染函数。开始走渲染逻辑了。 小结 小结一下setup的始末 从组件挂载开始调用createComponentInstance创建组件实例 传递组件实例给setupComponent setupComponent内部初始化 props 和 slots setupStatefulComponent 执行组件的setup 完成 setup 流程 返回渲染函数 …
4.前端如何规范提问promopt 我希望你能充当一名高级前端开发者。我将描述一个项目的细节你将使用以下工具编写该项目vue、yarn、elementUI、List、vuex、route、markdown、axios。你应该将文件合并为一个单独的 index.vue 文件不要写解释。我的第一个请求是“创建一个宝可梦应用该应用列出了从 PokeAPI 精灵端点获取的带有图像的宝可梦”。
5.前端简历 为了申请工作我想写一封新的求职信。请写一封描述我的技术技能的求职信。我已经从事网络技术工作两年了。我曾经担任过8个月的前端开发工作。通过使用一些工具我有所成长。这些工具包括[…Tech Stack]等等。我希望能够发展自己的全栈开发技能。我渴望过上一种T形人才的生活。你能为我撰写一封关于自己的求职信吗
6.补全下列代码 “”“const animals [“dogs”, “cats”, “birds”, “fish”]; let animal animals[Math.floor(Math.random() * animals.length)]; switch (animal) { case “dogs”: console.log( “Dogs are wonderful companions that bring joy and loyalty into our lives. Their wagging tails and wet noses never fail to make us smile.” ); break; }”“”
一般来说你最好以冒号结束提示并另起一行粘贴你的代码块。用三个反引号 [代码 code] 或三个引号 “”“[代码(code)]”“” 分隔开代码块也是个不错的选择。
7.将下列代码片段从 JavaScript 转换为 TypeScript; “”“function nonRepeatingWords(str1, str2) { const map new Map(); const res []; // Concatenate the strings const str str1 str2; // Count the occurrence of each word str.split(” “).forEach((word) { map.has(word) ? map.set(word, map.get(word) 1) : map.set(word, 1); }); // Select words which occur only once for (let [key, val] of map) { if (val 1) { res.push(key); } } return res; }”“”
8.我希望你能充当一名高级前端开发者。将下列代码片段从 优化; “”“ {{ user.name }} ”“” 8.充当校对员 我希望你充当校对员。我会给你一些文本我希望你审查其中的拼写、语法或标点错误。完成文本审查后请提供任何必要的更正或对改进文本的建议。
总结 ChatGPT 很强大也很笨毕竟它不联网且只有 2021 年以前的数据。可用来帮助我们读一下晦涩的源码还是可以的但也只能辅助作用还需要自己的思考。
