qq_34306228的博客

代码中创建 .github/workflows/deploy.yaml， .github/workflows/test.yaml文件，上传到github后，系统会自动触发部署，从而自动增加 gh-pages 分支，分支下相对应的文件 和 本地执行“pnpm run build”生成的 build/dist 文件下的内容一致。需要对权限进行授权，对仓库的读，写权限，创建文件权限等设置，对仓库进行授权后，才能对当前仓库进行干预，有些工作流会去写些目录到当前工作当中，不会让其他人擅自对仓库内容篡改。

提示：自动化测试：写基础包的一定要进行自动化测试，为了让使用者使用的更放心，使用开源包也是看是否有自动化测试，还要看测试覆盖范围是否是比较齐全的，小厂的话不太关注，中大厂的话使用第三方的包是非常关注自动化测试的。

一般上半年行情比下半年行情好，这几年没有前几年行情好，一面的面试官很可能是你的同事，面试的时候不要有情绪，一上来就给hard难度，是不想要你，但是一开始是简单的，后来给hard难度的，证明面试官看好你。可以理解为搞翻译的，webpack不认识的语言，都可以编写对应的loader帮助webpack翻译成AST的，通过AST做各种各样的转换。追踪：发布流程的追踪，用户的追踪。持续的改进和迭代：不是一成不变的，是不停的根据开发的情况，系统整体的变更情况，生产环境的情况等不断变化。

从if (isDef(data) && isPatchable(vnode)) 这句开始就比较重要了。第二，不需要那么多的属性attribute，只针对当前所希望获取到的那部分属性去消费就好了。因此这里通过 虚拟对象(虚拟VDOM) 来进行判断，判断到底该用什么，怎么用它。前面所作的事情：将oldNode节点上的事件全都挂载到新的上处理。这个过程才是真正的双端比较，双端比较的过程就是所谓的。第三步，如果以上情况都没匹配到，就只能是纯找了。老新：头头，尾尾，头尾，尾头的情况。也是当前的子节点进行双端比较。

vue的创建入口src/vnode.ts.tsvnode处理src/renderer.ts进行一系列 ast 的动作，然后交由给patch，进行diff比较，针对diff处理完成后，最后将其转化为dom，dom是交由runtime-dom去做的runtime-dom根据vnode节点，其实是要转换成dom结构的，根据 ast 和 vnode节点 来区分 web 和 weex的节点，创建好vnode后，拿着这个节点把他转换成真实能够消费的属性调用到原生的API去进行dom维度的操作

所有的点文件夹都是或中的内容完整的编译的核心，packages/compiler-core这三点是现在作为主流开发方式都是基于ts去做的types是作为ts的入口module是作为ECMAScript module(esModule)，正常通过 import xxx from xxx，引用的就是这个路径main 默认引用这个包的时候，作为UMD的方式去引用最后引用的路径npm上@vue/compiler-core包这个就是在 package.json 中就算是，怎样去具体约束 exports导出

runtime和compiler区分：runtime，vue本身真正能够运行的部分，compiler，将vue2的模板语言写法，转化成vue能够直接识别的语法。vue-cli 引用的项目中，在 webpack配置里，引入了 vue-loader，就会把vue模板给做这件事，vue本身是不会做这件事的。vue2.6之后的版本都做的是兼容Vue3的内容，2.6版本前的内容才是纯vue2的内容，这里看的V2.6.14版本代码。使用函数去做的话，就可以通过 Vue的原型Vue.prototype给他去注入，

APP 渲染页面的结构，form表单Layout 布局，整体页面，html是在这里绘制的ErrorBoundary 目前还没用上这里 Route的根路径，算是最新版本的特性，指代当前 router的类型，这里的 ./+types/root 使用的是 tsconfig.json中的 rootDirs[1]的值，完整是 .react-router/types/app/+types 这个路径用的就是这个文件......是前端应用中常见的绘制的部分url";

通过一个参数，parentId 传递给下面的child，他们之间有一个关联的脐带：contextId，找到roots之间的关联方式。scrollIntoView，打开某个页面后，翻到某个位置，重新刷新后，还能够定位到上次翻到的那个位置上，实现锚点效果。有限状态自动机：各种各样的状态管理，通过事件触发一个行为，行为是固定的，相同的输入指向相同的输出，类似于纯函数。ref 不会重新渲染，与视图无关的时候使用，如果与视图相关的使用ref，则不会达到想要的效果。不会更新重新渲染，一般是在与视图更新无关的时候使用。

类似：这种形式的就叫做自定义hook自定义hook中使用reactive中已有的hook本质上是：用已有的hooks做相同某种功能的聚合，聚合后能够在其他某个地方取消费}, []);保证代码是相对独立的}, [])return pos// 用法</div></div>

react官网团队中选型时候，如果没有历史包的话，就选择最新的react，如果有历史包的话，选择不影响历史包升级的版本但是最新的也容易踩到坑在React19中，主要看新特性和带来的提升即可新特性：form类似于这里的use可以理解为，添加响应式的逻辑性能上的提升：ref可以作为props，平常项目中使用的是improveAPI去关联，而无法用props来关联。

在pages下 —> Build and deployment =>这里就是部署我们的 github pages的，比如说，在github下注册了“xxx”仓库，针对于这个仓库，能够在站点的网址上有“xxx.github.io”这样的内容，就是通过这里Build and deployment，部署的话，就可以选择刚刚代码中部署的分支，然后选择根目录，把我们这样的静态资源（gh-pages分支上打包的产物）部署到 xxx.github.io上。因此，一般要么是放在同一的目录下，要么是在hooks下创建。

webpack：cross-env能够声明不同的环境，dev，prod，test 能够通过dev注入到process.env.NODE_ENV。cross-env 能够注入到全局环境下，在window，linux，mac不同环境下都能使用cross-env做好兼容，只是用于注入变量。当src/server，webpack，babel.config.ts这几个发生变化的时候，才会去解析这个包。当我们的组件发生变化时，只要在外面包裹ErrorBoundary，就能避免页面报错，展示的是兜底错误的提示。

当页面首次加载时候，spa只会返回空节点，内容都是空的，而ssr会将页面的骨架，内容等提前加载出来，提高效率。spa首屏加载很慢。SSR:利于首屏加载CSR:(spa)不利于首屏加载，页面结构为空节点本次项目可以执行在浏览器，也可以执行在客户端中。

d.ts是所有类型的集合，全称是：declaration type 都是通过 @types/react去管理的。针对不同场景下参数的兼容，参数不同，则场景不同，考虑到的情况也不一样。以上两种写法，一般都用第一种写法，比较规范，考虑到代码扩展性等。引入的是文件的类型，导出的时候也是按照文件模块/类型引用。关于ts配置项，tsconfig.json。再 tsconfig includes注入。@types是约定俗成的。全局模块，是全局直接用。