vue Webpack4配置优化

刚面试了一个四年前端简历写熟练使用 v u a react 主导过多个中大型项目，我问他一个真实痛点，他直接蒙了。我说你们项目越做越大，几百个页面组建，层层嵌套，突然有一天改了 a 组建的一个数据， b 页面报错了， c 组建也跟着重新渲染，整个状态像一坨乱麻。你怎么设计才能避免这种混乱？ 张口就来这简单，把所有数据都放 vox 或者 redux， 统一管理，全区唯一数据员。兄弟，你知不知道，全区 store 就 像一个大水池，谁都能往里扔东西，谁都能喝一口，时间长了，水池里什么都有。 你改一条数据，所有依赖这个数据的组建都跟着刷新。性能不要了，维护性不要了。真正能驾驭大型项目的状态管理， 得从四层来设计。你记好了，如果这道题目你也不会回答的话。我整理了让大厂 hr 沉默的必考题库，包含 v o 灵魂拷问、 react、 高频陷阱、 j s 十连问点个赞，评论区甩六六六，打包带走 nice。 第一层，分层设计状态必须分层，不能一股脑全扔。大局分三类，大局状态，用户信息、权限、主题语言、跨页面共享的才放全局。 store 局部状态，组建内部 ui 状态就用组建自己的 data 或 u state， 不要污染全局。 服务端状态，从后端拉取的数据，用专门的缓存库管理，比如 ricocherry， view， query s w 二，它们帮你处理缓存失效重试，比你自己写 style 强一百倍。第二层，模块化设计 局 store 不 能是一个大平层，必须按业务模块拆分起用命名空间，比如用户模块、订单模块、商品模块，各管各的互不干扰，模块之间通过事件或局回调通信，绝对禁止跨模块直接修改别人的 state， 这叫高内聚低藕合。第三层，性能优化大项目 store 可能很大，不能一开始就全加载， 用动态注册 store 的 能力，只有访问某个页面时才加载对应模块的 state， 更新时用 shallow 或者 uselecter 精确依赖，只让真正用到的组建更新，别动不动就全量重渲染。第四层，服务端状态管理服务端数据要有一套完善的缓存策略，比如 react query， 实时 while re validate， 先拿缓存展示，后台再发请求更新。 同时要解决缓存一致性问题，修改了商品后，怎么让商品列表的缓存失效？要么主动 infact， 要么用 revzip 推送更新，绝对不能让用户看到脏数据，牛逼 牛逼！所以这道题面的是你有没有状态管理的架构思维，不是你会不会用 vax 的 commit 和 dispatch， 而是你怎么给几百个页面设计一套清晰、可维护、高性能的状态体系。 在架构师眼里，状态是应用的血脉，血脉混乱，整个应用都会中风瘫痪。最后，你们项目状态管理踩过哪些坑？怎么重构的？

刚刚面试了一个四年前端，简历上写着精通 v o s 开发。我问用户打开一个 v o i 应用，从始化到销毁，中间经历了哪些阶段？每个阶段适合做什么？他回答， before creator creator before mount mounted before updated updated before unmount unmount。 我 追问具体每个阶段能访问什么？ d o m 在 哪个阶段可用，亦不请求应该在哪个阶段发。服务端渲染时哪些钩子不执行？ keep alive 组建多了什么钩子？组合式 api 里这些钩子怎么用？它开始背钩子名称， 但分不清时机和用途。很多四年的开发者只知道生命周期勾子的名字，却不理解每个阶段的执行时机和最佳实践。面试到此结束，了解的还是不够多，这其实是一个很多中级前端都会踩到的坑。如果这道题目你也不会回答的话，我整理了让大厂 hr 沉默的必考题库， 包含 v o 灵魂拷问、 react 高频陷阱、 js 十连问、点个赞，评论区甩六六六，打包带走 nice， 系统性的掌握 v o 三、生命周期需要打赢这四场战役。第一战役，出土化阶段，组建诞生 before create 特点，实力出土化完毕，但数据观测、事件配置还未开始，能访问，无 实战价值，极少使用可用于插件开发时的特殊逻辑组合式 api 对 应，没有直接对应 script step 默认在 step 阶段 created 特点，数据观测属性方法计算属性已完成，但 d o m 未生成，能访问 data props computed methods， 不能访问 d o m 元素 a l e。 实战价值，发起异步，请求驶驶化，非响应式数据监听事件。注意，服务端渲染时也会执行，避免操作。浏览器 api 组合式 api 中的对应 type 的 函数本身就是这些阶段的整合 执行时机。 before crease 之前可以访问 props， 但还没有 dis。 第二战役挂载阶段， d o m。 登场 before mount 特点，模板编印完成，即将首次渲染到 d o m。 能访问模板已编印但尚未插入 d o m。 实战价值，极少使用最后一次修改数据的机会。注意，服务端渲染不执行。 mounted 特点，组建挂载完成 d o m。 已生成能访问 d o m 元素 e l。 子组件实战价值，操作 d o m。 第三方库出尺画图表渲染，访问或修改子组件， 添加事件监听 resize scroll 发起依赖 d o m。 的 异步请求。注意，不能保证所有子组件都已挂载，用 next tick 或嵌套 mounted。 组合式 e p i unmounted。 第三战役更新阶段，变化响应 before update 特点，数据变化后， dom 更新前能访问最新的数据。旧的 dom。 实战价值，在 dom 更新前获取旧状态，手动移除或修改即将变化的内容，避免频繁更新的优化。注意，避免在此阶段修改数据。 updated 特点，数据变化导致 dom 重新渲染完成，能访问最新的数据和 dom 实战价值，依赖 d o m。 更新的操作，监听数据变化后的副作用坑点，不要在 update 的 中修改数据，每次数据变化都会触发。注意性能，组合式 api un updated 性能优化， 避免不必要的更新。 vmail should updated 批量更新多次数据修改合并为一次更新。第四战役销毁阶段，组建谢幕 before unmount 特点，组建即将销毁，但还完全可用，能访问所有数据。方法 d o m 实战价值清理定时器，取消网络请求，移除事件监听，保存临时状态到上层或存储 vo 二中叫 before destroy amount 特点，组建已销毁所有指令，解绑事件监听，移除能访问，已无法访问。组建实力，实战价值最终清理通知， 副组建或局建立实战价值最终清理通知副组建或局建立。实战价值最终清理通知副组建或局建立。实战价值最终清理通知，副组建或局建立。实战价值最终清理通知。 api on amount keep alive 专属钩子 unactivator 组建被激活 undactivator 组建被缓存 场景标签页切换时保持状态，列表页返回时恢复滚动位置。实战案例，复杂表格页的生命周期设计需求，表格页需要初步加载数据，监听窗口 reset， 调整表格列宽，定时刷新数据离开时清理。 设计 created， 发起出示数据请求 mounted， 注册 resize 事件监听驶驶化表格 d o m 操作 before update 表格数据变化前记录当前滚动位置。 updated， 数据加载完成后恢复滚动位置 unactivated， 重新注册 resize 监听 auto captured 捕获子组建错误降级显示或上报。这个就叫专业。 这道题考察的是对 v o i 组建生命周期的深刻理解，以及在不同阶段做出正确操作的能力，是四年前端写出高质量无坑代码的基石。最后，你遇到过生命周期使用不当导致的 bug 吗？是怎么发现和解决的？

今天面试一个四年经验的前端，简历上写着负责过多个大型项目的架构设计。厉害，我问了一个架构师 b 问题，你们项目为什么选择这种渲染模式？ cs 二、 ss 二、 ss 二分别是用什么场景？他回答，我们用的 v u e 默认就是 cs 二， ss 二是服务端渲染，像 nux 点 js 那 种。 我追问，那如果一个电商网站，商品详情页用什么模式？首页用什么？用户中心用什么？为什么？如果商品数据每天更新一次，用什么模式？ 如果每秒都在变呢？它这个可能都用 ssr 吧，或者有些用 csr。 四年经验，连基本渲染策略的选型都说不出依据。这架构设计是怎么负责的话？我整理了让大厂 hr 沉默的必考题库， 包含 v o 灵魂拷问、 react 高频陷阱、 js 十连问点个赞，评论区甩六六六，打包带走 nice。 现代前端渲染策略是一个完整的谱系，需要从四个维度理解，第一维度，四种核心渲染模式对比。 c s r 原理，服务端返回空 html， 浏览器加载 g s 号渲染。优点，服务器压力小，交互流畅，适合复杂应用。缺点，手屏慢， seo 差，低端设备性能问题， 适用后台管理系统工具型应用登录后才能访问的页面。 s s 二原理，服务端渲染完整， html 返回，浏览器直接显示。优点，手屏快， seo 好， 社交分享友好。 缺点，服务器压力大， pdf 慢，开发复杂度高，适用电商详情页。内容型网站需要 seo 的 页面 ssg 原理，构建时生成静态 html， 部署到 cdn。 优点，极致性能， cdn 友好，成本低。缺点，数据更新需要重新构建，不适合动态内容， 适用簿刻文档、网站营销页面不常见的内容。 i s 二原理， s s g。 加按需更新，首次访问静态后台触发重新生成。优点，静态性能加动态更新两全其美。缺点，实现复杂，需要框架支持适用电商商品页，新闻网站需要定期更新的内容。第二维度， 选型决策矩阵五个决策维度 s u。 要求，高 s s 二 s s g。 低 c s。 二手屏速度高 s s 二 s s g。 一 般 c s 二，数据实时性，实时 s s 二 c s g。 服务器成本有限 s s g c s 二，定期更新 i s s g。 服务器成本有限 ssgc s 二，充足 ssg 开发维护能力强，任意弱 csgssg 典型场景选型电商首页 ssg 加部分 csr 组建，定期重建商品详情页 i s r。 访问时触发重新生成 购物车，个人中心 c s r。 登录后内容博客文章 s s g。 配合 webhook 触发重建实时数据大盘 c s r。 加 web socket。 第三维度，混合渲染实战策略，同构应用一套代码跑在服务端和客户端， will call a new xt dot js react call the next js。 注意避免在服务端使用浏览器 api 增量。采用现有 cs 二项目，逐步引入 ss 二核心页面，用 ss 二次要页面保持 cs 二使用微前端拆分不同渲染模式，渲染降级， ss 二失败时降级到 cs 二静态页面回退方案，监控渲染成功率。 第四维度，性能监控与优化关键指标， ttfb ss 二模式下直观重要 fcp lcp 首屏渲染速度 tti 可交互时间，水合时间，客户端激活耗时 ss 二优化技巧， 流势渲染，边渲染边输出组建，即缓存缓存，不常变的组建，数据缓存、 readis 缓存 api 响应，避免在服务端执行耗时操作。 ssg 优化技巧，增量构建，指重新生成变化的页面，按需生成访问时才生成 cbn 预热，提前推送热点页面到边缘节点。第五维度框架选型与趋势 nextel js 支持所有渲染模式。 a p p router 带来全新架构，适合大型 react 的 项目。 nix 叫 jess， 同样支持多种渲染模式，模块化设计，生态丰富，适合 v o 技术站团队。 estro 岛屿架构，静态为主，动态组建，按需加载多框架支持，可以在同一项目使用 v o 和 react。 极致性能默认零 j s pubic 可恢复性，无需水合，直接恢复交互。创新的渲染理念适合追求极致性能的项目，这可厉害。 四年经验的前端应该对不同渲染模式有深入理解，能根据业务场景做出合理的技术选型，而不是只会用脚手架默认配置。你们项目用的什么渲染模式？遇到过什么坑？

大家好，我是晓峰老师，今天出一期教程， cosai 编程十分钟，开发一个 java 项目， spring boot 四加 v u 三加 v 的 学生信息管理系统。 这样子啊，我们先建一个那个 java student pro 啊，叫叫那个 pl 啊， project， ok 啊，然后里面的话，我们可以是有一个，有一个，那个 server 啊， server 项目， ok 啊，然后 client 的 话我们待会用那个，呃， wait 啊，直接直接直接建啊，待会我教大家怎么弄啊。 ok， 然后这个 java 项目的话，我们这边啊，我们这边可以拗一个，新建一个 project， 然后这边的话，路径的话注意啊，路径的话我们这边先选，选到 cursor 啊， cursor 那 边去，目录要要正确， 然后我们刚才哪个项目，哎，怎么哎，刷出来了啊，是那个加我的啊，然后 server， 然后我们这边选 server 啊， ok， 呃，这目录别弄错，然后加我，然后那个用 vivo 啊， vivo 管理项目，然后 id， 然后这个的话，这个报报名就加我，他们就加我一二三四啊， ok， 然后这个 jdk 版本是十七啊， 十七，因为我这边呃安装了，然后用架的形式 next， ok， 然后我们这边选一些那个依赖啊，依赖的话看一下啊， spring web 是 需要的，然后，嗯，看一下啊，呃，往下拉啊， 前后端分离的话就不需要这个模板引擎了啊。 sql 的 话 spring sql 要加一下啊， sql 的 话我们这边是用的是 mybites 啊，嗯啊， mybites 呢？ gdp 啊。 哦，在这儿眼睛花了，看看半天没看到， ok， 其他的话我们暂时不需要啊，你要需要的话到时候也额外可以加，也可以让那个科室给你加啊。 ok 啊，它能它能，它也能执行命令的啊，这有些只是权限问题啊，然后 ctrl， 然后类似 windows。 然后这边的话我们最好指定下 menu 啊， 待会儿。这个依赖这个太慢了。这边的话不用这个啊，这边的话，我这边有一个阿里云镜像的一个 setting 啊， ok 啊，大家自己自己弄一下啊，自己配一下啊。这个这个大家应该会啊，这个搞家务的不会。这个没有阿里云镜像配置，这个这个就没没法混了。 ok， 然后我们这边啊，可以先把它给依赖给下载一下。呃，下载的话，哎，他没帮我。作为那个 loadman project 不 应该是默认就有吗？ ok 啊，他已经给我下载完了，其实我本地，因为我大家肯你们可能下载慢点。因为我背课的时候下载过一半，所以本地就有啊，他直接给我下载了。 ok 啊，这样的话我们 后端就建完了，然后我来建前端啊，前端的话注意一下啊，前端的话，如果你不用我的这个录的版本的话啊，你可以去官方去下载最新的 v 二十四啊， ok， 呃，然后这个是 n b m create width 啊， latest， ok， 然后我们这边怎么来用呢？当然你可以复制一下，也可以手敲，最好复制一下，手敲有时候会敲错。 这啊呃。在这啊，在哪在这啊。呃。直接进入，直接 cmd 命令涵， ok 啊，这是最快速的，然后右击啊，贴一下 nba 编辑 bet， 然后用最先版本的。然后呢？执行一下啊，执行一下之后啊，然后它，呃。 是否需要那个创建这个是否是否继续啊？ create bet 有 个创建包的啊， ok， 然后他这边让你输入那个项目名称，我就叫可莱特，然后这边的话他自制的框架比较多啊，一大堆啊，我们选微啊，然后他用那个 java script type script， 大家贴纸可能大家不太熟啊，用 java script， 然后使用八艾特，我们这边暂时不用啊， yes 啊，我们直接那个进行安装啊，等安装的时候啊，这边新建完项目之后啊，大家如果后面安装要快的话，加一个，加一个，那个我用的是淘宝，淘宝镜像啊，贴到这儿，待会儿它后续的话安装就会快很多，不然的话就慢啊， ok， 然后这话就完了啊，是不是很快比那个 v 浏览器快多了， 你看这样的话就建完了之后啊，然后我们先回到这边项目里面，我们看一眼啊，这是我们生成的啊，新建的项目，然后我们我们让 cos 啊，去给我们完成后面的后面的这个大任务，然后 cos 打开一下，打开完之后啊，我们这边的话，项目的话需要那个，呃，打开文件夹啊，先打开文件夹，然后找到这个 java 三 and pro project。 打开之后啊，这边又不给我显示东西啊，给我显示东西的项目的话又不给我显示。我们到查看外观这边啊，它是给我这个或者你按 ctrl b 啊，是应该 ctrl b 啊， 然后外观这边啊叫 ctrl b 啊，把这个给你看这个是不是项目结构代码？ ok， 然后我们我们要来生成项目啊，生成项目的话我们这样子吧，先来个计划，就是说，呃，计划的话，我们把我们我们这边和他商量一下啊，就说我们要开发，我们开发一个，呃，我们要生成一个简单的啊，就把这直接贴上吧，看看，看看他，看看他的想法 来，当然这边的话我们不用 copos 啊，我们用 copos 四点六， ok， 我 们来计划一下。 对啊，呃，刚才的话，那个他说我这个因为他这个有些模型对地区限制嘛，然后我没办法，我就换了个地区啊，然后现在又可以用了啊， ok 啊大家大家有些话我就不直说啊，这个没办法，我刚才忘了换地址了。 ok， 然后他这边的话啊，思考了一会之后列出了一个清单啊，然后这个清单的话我们可以看一下啊 这边你看这边这边就是一个那个上下文啊，你看这个上下文还挺大的啊，引用了百分之十啊。 ok， 然后它正在正在设计啊， 现在我们只是我们刚刚看一下啊，我们是我是不是，我们是不是点错了，我刚才点的计划是不是又点成那个 agent 了？ 他不管，他已经帮我帮我们在那个了啊，反正都可以啊。那我还是中断了啊，我们还是来来那个扭一个啊，还是弄一下计划， ok 啊，刚才直接是 a 点的，我忘了点了，现在我们选的还是四点六啊。 ok， 我 们看一下计划，刚才我点错了，因为我刚才切换切换切换地区的啊。 ok， 然后他这边的话啊列出会列出计划清单啊，他在思考啊，这个计划已经列完了，之后我们看一下啊。 嗯，它这边清单已经弄完了啊，我们简单看一下。这是后端，你看 cover， 然后 entity 这些应该没问题啊，这个代码结构还可以，是 application 属性啊。呃。然后移除， ok 啊，他说不需要 security 框架也可以移掉就移掉。然后这个接口设计啊，还可以啊，用户是登录，然后这个前端啊，前端改造啊，前端安装依赖，因为它这边的话，我们没有那个 element plus， 它给我安装上了，包括 access 啊，然后前端的一个目录啊，配置添加开发代理 ipi 页面设计文件清单。 哎，这边的话给我修改了一下啊，修改了一下，一代调整。 ok 啊，这可能我是新建啊。 ok， 这个还可以啊，然后这边的话它是做了十三个步骤啊，然后，呃，我们可以点那个 build 啊，因为它现在是一个计划 plan， 然后我们点 build， 然后他在执行这些步骤的时候啊，其实啊，我这边的话你就看这个吧，看我们 id 里面啊，他他已经一步步，你看像这个 dpc 啊，他已经给我已经给我建成了啊，然后后面的还有一会啊，因为我们现在不是用的 fast 了， fast 太贵了，我们现在是用普通的普通模式。 ok， 稍微等一会啊，然后他再新建项目，然后这边的话提示啊，我这边要运行安装啊，安装这个 vroot 啊，他可以帮我们安装啊，我们可以绕一下，当然可能不一定权限够啊，不一定有权限，因为我这个，呃， cos 的 话其实应该用管理员权限啊，不一定有权限啊， 也不一定能执行成功，执行不成功的话我就自自己执行啊，因为它这边的话给大家看一下啊，像那个前端项目我们也能打开，我们前端项目打开一下啊， close trust 啊，这边的话我看一下啊， run 我们看一下啊，他这边的话你看这个，其实我们在这边终端里面可以执行的啊，但是我们不知道他有没有跟我们执行啊，就是我们这边应该也可以啊，应该我们已经执行成功了啊， ok 啊，然后他再配置啊，你看他他他，反正他一条龙服务啊，帮我们都可以运行那个安装库啊，安装库啊，是不是很强大？但是记得啊，安装速度快点，加个加个淘宝镜像。 ok 啊，就是我们需要一些开发工具，不然的话你弄不好这东西， 我不知道他给我弄到什么进度了，我们去看一下，你看后端是已经生成了啊，但是我们看一下他这个测数据也有就挺好的，你看这边的话我们再看一下啊，看一下这边，这边不管，这边的话爆头不管，因为他没给我们弄完呢， 然后它已经这个执行完了，执行完了之后啊，它会会给我们一个操作清单啊，做了哪些事？ ok， 然后我们来看一下啊，这操作完之后啊，它也不一定全对啊，我们看一下它的一个，呃，看一下它这边，首先数据库配置啊，当然我这边密码是一二三四五六啊，然后 db student， 我 这边是自己要去新建一下，我这边数据库新建一个 db student， 当然呃，每个公司的规范都不一样啊，比如说有的叫 db 开头的啊，所以的话，我这边其实呃就简单入门嘛，我们后面的话要把公司规范啊，都要都要写上去啊，当然我们后面还有高级的一些技巧，写规则或者技能包啊， skis。 ok 啊，这个我们后面讲项目再说吧，现在一下子讲太多，大家肯定会晕啊，大家不能晕啊。 ok， 然后的话我们就直接执行一下啊， k 档执行一下这个脚本， ok 然后这个是用户表啊这个是学生表，然后这是班级表。 ok 啊，然后，呃我们看一下，我们直接来启动啊，直接启动一下可能会有错误啊，正常的。 ok 啊，这次比较意外，居然没有错误啊，我前面几次用的是四点五啊，它是有错误的，然后我我就把错误内容我就把错误内容贴贴进去，然后它自动修复啊，当然这次没没错，我也没办法啊。呃然后这边啊这边的话前段啊前段我们来运行一下啊，这个 v， 呃 v 的 话是 n p r d v 啊，我们启动一下， 启动完之后啊，然后我们来测试， ok 啊，这是它的一个界面啊，然后用户名密码在这。其实界面还可以啊。当然呢你你需要一些特殊的需求，你就可以跟跟那个科室提啊，然后模型给你处理啊，你要什么需求都可以啊，当然我们以后后面会学到一些技能包啊。呃那个那个密码，我的密一二三 登录一下，哎能登录啊能登录之后我们看一下，它是有那个先不管啊。 ok， 我 们看一下啊，这边要退出啊，然后这边搜索看一下啊，看它有行不行，哎这个可以啊，一般不会错啊这个一般不会错，最多它是生成代码有问题，就是因为它带了空格，它是没有给我那个 ok， 这个好多啊 ok 啊，然后可以新增啊，新增的话我就随便来一个啊，班级班级 ok。 哎添哪去了？ 好像是没添加成功啊。哦有的啊有的它怎么没给我显示呢？ 哦我知道了，我这边有个搜索 sorry 啊，它添加在这了，它它这个联动线比较好的，这个我就，我就不测试了，这个一般不会有问题的。 ok。 然后这边还有个班级管理啊，添加、修改、删除， ok， 是 不是还可以啊？ ok。

刚刚面试了一个四年前端，简历上写着精通 voc 三，我递过一杯水，轻声问他，如果用户的浏览器是一个舞台， voc 组建从登场到卸幕，中间上演了哪些幕？美目演员能做什么？ 他脱口而出， before create created before mount mounted 像是背诵节目单，但当追问演员何时能触摸道具， 哪一幕最适合拉赞助，如果后台有观众，哪些幕会取消，他陷入了沉默。很多自称精通 v o y 的 开发者，其实只记住了勾子名称，却不理解每个阶段真正的时机与职责。面试到此结束，多少有点水分在如果这道题目你也不会回答的话，我整理了让大厂 hr 沉默的必考题 库，包含 v o 灵魂拷问、 react 高频陷阱、 j s。 十连问点个赞，评论区甩六六六，打包带走 nice！ 今天我们就用四场战役彻底搞懂 v o 三生命周期，下次面试直接满分！第一战役，出使化阶段，组建诞生 before create。 特点，特点，实力出使化完毕，但数据观测、事件配置还未开始，能访问，无 实战价值，极少使用可用于插件开发时的特殊逻辑。组合式 api 对 应没有直接对应 script setup 默认在 step 阶段， created 特点，数据观测属性方法计算属性已完成，但 d o m。 未生成。能访问 data props computational methods， 不 能访问 d o m 元素 l e l。 实战价值，发起异步，请求出场。非响应式数据监听事件，注意服务端渲染时也会执行，避免操作浏览器 api。 组合式 api 中的对应 setup 函数本身就是这些阶段的整合。一行时机， before create 之前 可以访问 props， 但还没有 this。 第二战役挂载阶段， d o m。 登场 before mount 特点，模板翻译完成，即将首次渲染到 d o m。 能访问模板已翻译但尚未插入 d o m。 实战价值，极少使用最后一次修改数据的机会。 注意服务端渲染不执行 mountit。 特点，组建，挂载完成， d o m。 已生成，能访问 d o m 元素 e l。 子组建 实战价值，操作 d o m。 第三方库出场图表渲染，访问或修改子组件，添加事件监听 resize scroll 发起依赖 d o m。 的 异步请求。注意，不能保证所有子组件都已挂载。用 next tick 或嵌套 mount it 组合式 api unmounted。 第三战役更新阶段，变化响应 before update 特点，数据变化后， d o m。 更新前能访问最新的数据。旧的 d o m。 实战价值， 在 dom 更新前获取旧状态，手动移除或修改即将变化的内容，避免频繁更新的优化。注意，避免在此阶段修改数据。 updated 特点，数据变化导致 dom 重新渲染完成，能访问最新的数据和 dom。 实战价值，依赖 d o m。 更新的操作，监听数据变化后的副作用坑点，不要在 updated 的 中修改数据，每次数据变化都会触发。注意性能，组合式 api un updated 性能优化，避免不必要的更新。 vmail should update， 批量更新，多次数据修改合并为一次更新。第四战役销毁阶段，组建谢幕 before unmount 特点，组建即将销毁，但还完全可用。能访问所有数据方法， d o m。 实战价值，清理定时器，取消网络请求，移除事件监听，保存临时状态到上层或存储 v u 二中叫 before destroy unmounted。 特点，组建已销毁所有指令，解绑事件监听移除能访问，已无法访问。组建实力，实战价值，最终清理通知副组建或全局状态组合式 api unmounted keep alive 专属钩子 unactivated 组建被激活 undiactivated 组建被缓存场景标签页切换时保持状态，列表页返回时恢复滚动位置。实战案例，复杂表格页的生命周期设计 需求，表格页需要初步化加载数据，监听窗口 reset， 调整表格列宽，定时刷新数据离开时清理设计 create 发起出示数据请求 mounted 注册 resize 事件监听初步化表格 d o m 操作 before update 表格数据变化前记录当前滚动位置 updated 数据加载完成后恢复滚动位置 unactivated 重新注册 resize 监听 undeactivated 移除 resize 监听暂停定时刷新 before unmount 清理定时器，取消未完成的请求，移除事件监听 error captured 捕获子组建错误降级显示或上报。这个就叫专业。这道题考察的是对 v o i 组建生命周期的深刻理解，以及在不同阶段做出正确操作的能力，是大厂前端面试的高频考点，看到没有，好厉害哟！

呃，今天明天两天呢，我们将会给大家聊到的是 vivo 三和 ts 的 实战，给大家具体涉及到的是 啊，表格的这个征商改查，也是我们在实际开发的过程中啊，比较常用的，是不是？那很多小伙伴发现现在我们用到的 vivo 项目或者 react 项目呢，都会陆续地引入 ts 语言， 那把 ts 语言引入进来之后，我们在开发上面，包括我们的写法上面会有什么样的不同呢？啊，这个具体怎么样去做好，一会再给大家说的过程中呢，那个小伙伴们也可以看一下啊，哎，如果说你当前项目刚好要用到 ts， 那 这块呢？哎，正好可以用是不是？嗯， 好，行啊，那我现在跟大家说到这块呢，我们先来看一眼具体的这个效果，效果的话，其实就是我们的后台管理系统， 说白了就是啊，一个表格服务端返回具体的数据信息，那我们在数据里面呢，可以去添加，同时可以编辑，可以删除，也可以对它进行查询，同时呢还有筛选 以及各种过滤，哎，就格式化。好，那如果说我们要是引入了 ts， 具体的写法是什么样的？来，我们先把项目呢给大家打开 好项目的这个访问呢，因为我们用到了 ts， 所以 说啊，像大家看到的，比如慢一点， gs 都会变更为慢一点 ts， 包括你在里面创建的一些像路由文件，包括我们自己写入的封装的一些啊，这个 那个文件它都会变更为 ts 的。 项目的启动呢，倒没有太大变化。一样的啊，也是 npm， 那 个叫什么 dv 对 不对？哎，当这个在我们的 ppt 接收文件中呢，是可以看到的， 好，那我现在跟大家把这个后台管理系统打开了以后，我们在里面可以呈现一二三四四个选项，然后点击首页的时候，里面呢默认是有一个表格， 这个表格默认情况下的数据是日期、姓名和地址，当然这些呢，我们一会把它变更为动态的。啊，好，我们来详细的看一下表格文件它里面啊这个写法， 当我们把这个表格文件打开了以后，如果说你当前项目添加了 ts 和没有添加 ts， 它最大最大的区别在于什么？ 在于我们的这个 secret 标签里面添加了一个语言，语言里面会写入 ts， 哎，当然有些小伙伴看到我下面这块呢，有这个红色的波浪线，它表示的什么？说白了就是你没有用， 是不是？哎，就是你没有去使用这些，它就给我们一个提示，所以在我们的 ts 里面有时候是这样的啊，给你突然来一个红色波浪线，有的可能是警告，有的是提示，哎，也有的是错误，所以这一块我们要去分辨。 好，那我刚才跟大家说到这个 ts 添加，添加了之后，我们在比如说具体某一些地方的写法上面呢，就会发生一些变化。 好，有些小伙伴说是写一个小说平台吗？哎，这个只是跟大家随意的写相关数据啊，哎，你到时候把这块学会了，以后想写什么样的后台管理系统都行，通用的啊，通用。好，那我在里面给大家定义的过程中，我们先来看一下啊，这个表格的一个展示， 表格的展示呢，大家可以看到用的是这个 elementplus， 哎，我们基本现在都会用到一些 ui 框架，像昨天跟大家聊到这个 react 的 时候，就有小伙伴不停地问，哎，怎么没有用到一些 ui 框架呢 啊？如果是最开始学习 react 呢，建议大家可以各方面去了解，但是 vivo 我 们比较熟悉了嘛，是不是？哎，你在里面用什么样的 ui 框架呢？都可以的啊？我们用到的是 elementplus， 好，那当前展示呢？这个是表格，在表格里面大家可以清晰的看到我们要展示的内容，日期，姓名还有地址。后面这块呢，还给大家写了这个具体的一个宽度，好，我跟他把这个呢都给删掉啊，然后我们里面的数据来源，它来源于我们的，哎，这个 table data 对 不对？那么也就说你相关的数据呢？是在这， 那大家会发现我们现在定义数据的时候和以往定义数据本质的不同在于哪里呢？在于这一块儿写入了 类型，这个典型的就是我们用到的接口，对不对？哎，也就是你现在看到的这个呢？ interface 就是 我们在 ps 里面经常给大家说到的接口，其实接口我们用的是非常多，什么时候用接口，有些小伙伴有没有去 get 到过，比如说我们定义了像对象， 那对象呢？它需要去受到一些约束，是不是？哎，我们在里面就可以通过这个 interface 接口，接口它不会做具体的实现，它只是 相当于啊，这个约束我们可以理解为它是一个合同，它对于我们的对象进行约束， 意思就是说在我们的对象里面必须包含第一个日期，它的类型进行约束，意思就是说在我们的对象里面必须要是字串，它呢也是字串， 第三个呢是地址，同样类型也是致富串，所以我们在写对象的时候，里面是必须包含三个属性字段的，当然如果说在这个位置，你要是多了少了，他是不允许，哎，不过话说回来，我们的接口里面呢，也有 可选属性以及任意属性，是不是？哎，这个呢都是可供我们去选择的。好，我刚才跟他说到这块，这个简单的理解一下， 也不知道大家对于我们的 vivo 项目里面引入了 ts 以后啊，比如说原那个添加 ts， 包括刚才给大家说到的接口这块呢，是否都可以 get 到？好，如果说这块都可以 get 到的小伙伴，你们可以小姨来一波啊，因为如果大家对于接口啊，包括我们 ts 里面的一些引用都了解的话， 我接下来呢就可以跟大家具体的去说到我们表格里面的具体数据，哎，当然如果有一些小伙伴觉得说啊接口这一块不是特别了解， 我也可以给大家能详细的就扩展一下咱们的那个接口。好，这一块我再反复的问一下，有没有小伙伴有什么不清晰的地方，哎，如果都清晰的啊，可以小姨来一波。嗯，都清晰不？ 哎，都清晰是不是好，没有问题的话，那我在接口上面就不做啊，更多的这个解释啊。如果有些小伙伴假设你现在对这块不熟悉的话，我们需要先了解，其实学 ts 呢，它是需要先去掌握，第一个是 js 六，然后再到 ts， 哎，他是有一个流程和顺序的。好，那我现在跟大家要实现的是我们现在看到的是这样一个效果啊，哎，要去把我们的这个表格数据呢展示出来，那说到这个位置，我不应该最开始去发送请求吗？是不是 道理来讲不应该是直接的，哎，这个静态的数据我们应该去发送请求，所以我现在在那个 t s 里面先要干的第一件事就是请求，不管你是数据的查询，数据的添加， 编辑以及修改啊，呃，那个删除对不对？那我们在这个位置呢，都是需要先去把这个哎接口给大家呢，就相当于我们的 excel 呢引入进来让请求。好，我们接下来给大家看一下啊， 提到这个 xls 啊，其实我们在平时聊的时候聊的多不多？聊的也挺多，昨天跟大家在我们的 react 里面是不是也说到了，所以大家会发现， 不管是在我们的呃，比如说 vivo 里面也好， vivo 二， vivo 三也好，还是在我们的 react 里面，基本上现在针对于这个数据交互就来，它呢是一个什么？可以理解为是一个 h d d p 库，它是基于我们的 permiss 的 h d d p 库，它是一个三方库， 所以它并不是基于我们的 view， 也不是基于 react。 像有些小伙伴这块会有一个误区，是不是？那都可以的啊，在我们的不同框架里面它都可以去使用， 好，那我现在要对它进行一些哎，就是我们要跟它聊到的是它的这个二次封装，这个呢，平时跟它说的挺多的啊，昨天已经说过了，是不是？哎，有些小伙伴如果昨天有听的话呢，应该会理解，但是我们今天是在 ps 文件下， 那么它的这个封装思路和我们之前在 js 里面是否有什么样的不同？所以昨天不是有小伙伴就提到了啊，写的是 js 啊，哎，如果我们是 ts 呢？当然 react 也一样啊，有些小伙伴你把它运用到 react 里面是可行的。 好，所以说到这块呢，来，我们简单跟大家写一下，还是一样的，分为以下几步，一步一步来写。 第一个呢，是引入我们的哎，核心库，好，我跟他在这个位置呢，都写一下啊，好，我们到了第二步，第二步呢，是我们的这个路径的配置，是不是？哎，你在里面配路径。好，第三个，有些小伙伴还记不记得请求那个拦截器， 对吧？好，第四个呢，就是响应拦截器啊，所以有一些小伙伴你在封装它的时候，你把这几个那个折腾明白了，后面我们写的时候都好写。好，我在这地方呢，还跟大家写一个导出，哎，因为有很多小伙伴很容易遗忘了咱们的这个导出。 好，写到这个位置之后，我现在呢，先一步一步的把这个哎，就是核心库啊，给大家导入进来。那我们在引的时候是不是直接这样写哎，有些小伙伴发现 gs 里面一样，是的啊，没有太大区别。 好，第二个呢，就是我们的路径配置，那在这个位置呢，它是拥有一个叫什么哎， base url 是 不是？来，我们把这个地址呢给大家写进来，当然这个地址再一次反复强调一下，它是服务端那个给我们提供的， 所以有一些小伙伴在写到这个位置的时候，不用过度的去纠结，哎，服务端到时候给你提供什么？听明白没？好，我当前的端口呢？是，哎，这个三千服务端给的啊， 好，然后呢就是我们的请求拦截器，那在这个位置写的时候， x x 对 不对？好，我们在里面写到一个 a in stop， 有 些小伙伴还记不记得，那还有就是由于我们是那个请求 request， 对 吧？好，在里面呢写入 u。 好， 这个呢是我们在 g s 里面平时给大家的这个具体定义， 但是这个请求拦截器有小伙伴提到他是干嘛的，也就说白了，我们在发送请求的时候，哎，干的事啊，哎，比如说你在请求头里面要添加什么，常见的就是请请求头携带 token， 对 不对？这个呢是比较常见， 那我们写了半天，好像跟我们加了贴那个 ts 和没有添加 ts 没有太大的不同。好，说到这个位置呢，我们开始慢慢的跟大家把相关的这个类型呢引入进来， 那在也就是说我们发送请求干的事的时候，这个 config 呢，它代表的是相关的一些请求配置是不是？那在里面如果我们要去加一些限制的话，记住了，在我们的 ps 里面， 它是拥有很多类制的，这个可以理解为相当于是类制的一些类型，哎，我们可以理解为是 excel 里面提供的类制的类型，那么这个类制类型它里面默认有什么好，我们首先在里面呢跟大家简单的写一下， 第一个呢是针对于我们请求的那 xls request， 好， 我来跟大家把这个先写一下，哎，这个 request config 代表的意思就是请求的时候啊，我们默认添加的这个，哎，就是类型， 再给大家强调一下它呢？就是为什么在这个位置我们前面要给大家添加一个 type， 它的作用相当于就是用来检测或者说申明我们的这个类型的， 其实在我们最终运行的时候，这些它都是不存在的，那像你现在写到的这些代表的是什么呢？就是我们的 x， x 在 发送请求的时候传参数的类型，明白没有？可以理解为是一个默认的， 那这个我们要写在哪里或怎么样去定义呢？在我们如果引入了 t s 以后，它的类型添加是不是在后面要给它加一个这个冒号？好，由于我们在这块写的时候把类型添加进来了，所以这个位置呢给大家添加一个括号呢？把它扩起来。 但为什么我们把这个类型添加了以后，它还是会出现这个红色的波浪线呢？在这个地方反复的跟大家强调一下它呢？其实这个地方相当于我们要去使用一个联合类型，也就说在里面呢还给大家添加一个 ali， 因为有可能我们 会是默认的这个请求的一些参数类型，也有可能是什么任意的 i， 就是 其他。所以在这个地方我们的写法上面和以往没有添加那个 ts 呢，会略有不同， 把他的这个类型呢进行了一些约束，再一强调他呢是内置的。好，这个呢是我们发送请求哎，要给大家写到，那么响应拦截器呢？好，那响应拦截器简单就是我们拿到响应数据啊，就是好，哪个跟他把这个位置也写一写啊？ 好，那比如说，哎，我在里面要干的时候，就是拿到了这个响应的数据，是不是你要干的事？ 好，我们把这个写进来啊，然后呢在这个位置呢，也一样的跟大家呢通过它来，但是呢在这个地方有点不一样的是什么？是我们的哎， this point 对 不对？好，然后呢给大家写到一个柚子， 那在这个地方我们和发送请求不一样的区别点在哪里呢？它的区别点在这反复的给大家强调一下， 第一个呢就是说我们有那个请求成功的状态，第二个呢就是请求失败的状态，是不是？好，你在里面呢？哎，直接咱们这样写就行，那我当前在里面跟他这样写入进来， 但是我们写完了以后，为什么这个位置，哦，我这地方这个地方是我写的不对啊，为什么？这个位置就是我们会出现，比如说各种报错，或者说相关的一些类型， 它的添加方式和我们以往又有什么样的不同呢？刚才在给大家说的过程中，针对的是那个请求嘛？是不是在里面呢？它也一样有啊？来给大家写一下 a， x， l， s， 然后呢是我们的哎，这个 respond， 哎就是它了，把它呢添加进来，那么它在哪个位置写， 在我们刚才写的地方这个位置你就可以添加，所以说没有添加 ts 和我们添加了 ts， 在 这个写法上面呢，它会略有不同。如果有些小伙伴担心，哎，这个会有一些什么不一样，你在这个位置呢，可以把 id 呢写进来， 包括我们在写的时候这个错误，你如果说要把里面的一些类型写进来，你在里面呢也可以直接的使用我们的这个 aly 就 行。那么刚才在给大家写的时候，我们看到了一个类型比较常用的啊，就是也是很多小伙伴比较喜欢的 aly， 它叫什么？它叫任意类型， 但是任意类型呢，我们其实是不建议大家过度去使用的，因为添加它之后，其实我们是不太明确具体的类型是什么。对，有那个小伙伴提到说我们讲的是前端相关的吗？是的，现在跟大家提到的是 vivo 三跟 ts 结合啊， 我们跟大家聊到的是这个 xos 二次封装，那么我们在封装的过程中，如果对于我们的请求拦截器响应拦截器添加了之后， 把相关的这个类型呢增加进来具体的一些写法，所以说在里面啊，像一些类似的类型呢，小伙伴们也要明白，避免呢，我们在写的时候不知道具体写什么， 它们其实也相当于是一种约束，是不是？好，把这些写完了以后，最后我们在里面还要对它干的说说干什么？哎，把它呢导出，记得啊，大家在导出的时候，我们要导出的是我们的 x rays 就 可以了。 好，所以我刚才跟大家写到这块，这个哎是我们平时呢比较熟悉的一个思路，简单的问一下大家，这块有没有小伙伴有不清晰的这个都能看明白的小伙伴呢？咱们小玉回复一下，再次强调一下，添加了 ts 和没有添加 ts 呢， 确实在写法上面它会略有不同。好，这个都好理解，是不是？哎，看到了很多小伙伴的小一回复啊，还有你们的六六六点赞回复， ok， 都看得懂对不对？好，那看得懂之后，我现在在里面就要给大家提个问题，如果我现在把这个 excel 进行了这样一种封装之后， 我们在主键里面啊，我现在想问大家的就是在主键中，我们要是调用，我们的调用方式是什么样的？ excel， 比如说 get 请求，你在里面写入我们的这个地址，是不是？好，当然如果说有参数呢？我们在里面哎，把相关的这个参数呢，也一样的给大家传过来，我后面就不写了， 我们是不是这样写，但是我们现在是在里面添加了这个 ts， 我 要清晰的知道你在比如说，哎这个 get 请求或者 pos 的 请求，或者别的请求的时候， 具体传的参数，以及我们的这个返回值的类型。那我在这个位置如何去定义呢？就是我们在组间里面调用，现在像这样调用，但是我确实是不知道我们的这个， 哎，就是类型，它具体的一些类型是什么样的？就是传餐的类型呀，是不是包括返回的这个类型呀？ 好，那说到这块呢，对于我们刚才给大家写到的这块，我决定继续的对它进行进一步的这个复用，哎，我们来看一下，我们来 继续呢对他进行一些附用，怎么样附用呢？我决定定义公共的这个附用方法，那么我们在调用的时候就可以清晰的知道他的输入类型以及输出类型。好，我们来看一下这块呢，他的写法是什么样 的？

好，那我们再去细化一下，细化一下啊，就是如果是 view 的 同学，你的整个 ai 全站的体系， ai 全站的 进阶体系应该是什么样子的？好，我这里快速给它去梳理一下前端的框架，那这个不用说了， view 对 吧？因为都是 view 的 同学嘛。然后呢，在前端到服务端中间的这一层桥结合过度，你就用 next gs 来去过度， next gs 的 过度 啊，那你的这个打包构建呢？这些呢，你都可以先不考虑，那这个是在前端那一层去开发的时候需要考虑的，比如 wait， 现在你就直接把 wait 学精通就完了，不要学 yep 学 wait 啊，把 wait 学精通， wait 的 打包构建，优化，那个插件化开发，还有 wait 的 原理全部了解就行了。好，然后再在这个基础上 next 再去进阶哪几部分呢？一个是数据库， 数据库的应用层啊，数据库应用层我们一般称之为 o r m， 这是最大目前最低成本的学习的一个方向。在呢，数据库的选择，大家无老去压 postgrad 啊，现在直接去往 postgrad 去学习就行了，不要去看什么 mongol db， 还有什么 my circle， 大家千万不要相信了啊， 直接相信我的 postgraduate。 为什么大家去看一看 github training， 还有呢？看一下整个技术圈的一些趋势大家就知道了， pg 现在是毫无疑问的 number one， 然后呢，你想一想， pg 的 一个 d 代码我不知道大家听说过没有，就是有个 pg 的 那个 pg d 代码就是 no code， no code platform 叫什么？叫 superbase， 我 不知道大家有没有听说过的同学， superbase 啊， superbase 应该大家听说过吧？ superbase 啊，好，所以呢，大家一定啊，就是相信我的往 pg 这个方向去学，因为 pg 它不仅是能够做业务的数据存储，业务的叫， 呃，那个 circle 存储啊，我们就称之为 circle 存储吧，还可以去做业务的 no circle 存储， no circle 大家应该知道什么呢？一个是关于数据库，一个是非关于数据库这些点啊，还有呢，包括向量型 pg vector， 它就是个六边形战士啊，这个一个精通，个个通，这种感觉。你再如果说在特定的领域，比如说你在向量数据库矢量存储这一块儿，你要去考虑最优的方案，那可以啊，你还有别的选择，比如说我们再给大家去讲这个内扣子 defy 的 这个项目的时候，给大家讲了 qugent 啊，讲了这个 qugent， 然后呢给大家还讲了，比如说像，呃， maus， maus， 这个我好像打错了， maus， maus， 那这个其实就是更厉害的了啊，做这个向量存储的，大家就往这个方向去学习去看。当然了，如果说你现在你的阶段具体到了哪一步，如果说跟我这里说的呢，其实有 有超出的这个情况的话，那大家如果说加入进来之后，还可以有更多的帮大家去做一些你现在已有的 ai 方向或者业务方向的一些探索和探讨啊，给大家一些，比如说，呃，以我过往 这个近两三年啊，基本上前前后后呢，有负责过了将近一二十个 ai， 直接去那个嵌入的，或者说有 ai 相关业务的这种产品啊，到时候可以给大家去呃探讨探讨，给大家一些方案，好，这是在数据库层，然后呢，再往底层绝对的要学习的一个东西是什么呢？ doctor， 当然这个上面呢，我忘记还说了一个点啊，这个其实是每位同学容易忽视的，当你如果还在纠结说什么 type script 跟 java script 到底学哪个的，有没有这样的同学，如果，如果你现在还在纠结我到底还要不要学 type script 的 话， 那你有这个想法的，这这一刻你就已经落后了啊，因为什么呢？大家可以看现在的所有的 ai 的 这个框架啊，比如说我随便给它打开一个 ai 框架，呃，比如说我们看一个 non chain 吧， 我不说话，大家只看语言支持就行了。同学们，卡吗？卡的同学扣个一，不卡的同学扣个二， 不卡吧，不卡的同学扣个二啊，不卡的同学扣个二。好，那应该不卡啊。同学，如果你卡的话，可以刷新一下或者检查一下你的网络之后重新再进一下啊， 同学们看到了吗？像比如说 nunchin， 那 python 跟 python 这两个方向，这这两个就 官方推荐，也是官方维护的 python 版本和 type script 版本啊， python 版本跟 type script 版本，所以你看，不管是 nonchain、 non graph， deep agent 这三个， python 版和 type script 版，你看 type script， type script， 大家知道 type script 重要性了吗？如果你还不知道的话，那我随便给你来一个 第三方的 ai 框架，比如说这个 mesra， 你 看看这个 mesra 它用的什么来去开发，那同样也是用 type script 来开发，对吧？也同样是用 type script， 你 看 next 也可以， next 也可以啊，这些选择 就是按照我们给大家去讲的这个方向，那安装包括呢？最后开发，开发的这个过程怎么来去实现？怎么来做？怎么来去定义这些？那个 test agent 来去做这个 agent 的 开发，包括结构化输出等等， 大家可以看到啊，所以如果你现在还在纠结要不要学 t s 的 话，那我给你一个建议，或者直接给你下个结论，就是百分百要学 这个，不学的话，那真的会落伍的啊。你现在可以看到开源的那些 ai 的 项目，就是大家现在知道的，我随便给大家再举个例子啊，大家最近应该听说过 open code 很 火吧？ open code， 那你看 opencode 是 不是源码用 type script 来开发，它不会用 java script 的 啊，不会用 java script， 你 看百分之九十八十六是用的 type script， 对 吧？这种 opencode 的 这个项目啊，这个 opencode 我 可以给大家简单的演示一下，都可以。我打开一个项目 好，比如说我直接 cd 到我，我现在这个项目啊，我现在这个项目叫妙码，呃， 好在这个项目里面，然后比如说在这儿我直接先呃打开 open code， 我 直接让它编码啊，比如说编写一个， 呃， hello world 或者 not g s hello world， 好， 直接编写，那这个百分之八十六的代码都是用的， 它是用来写的。然后其次是 cs， 这个呢是它的打包工具，这跟它无关啊， rust 零点五的成分，所以大家知道了这个 ps 的 重要性了吧。大家看一下这个 star， 大家就知道这个项目到底火到什么程度，现在只要是涉及到 ai 的 项目呢，都很火，但是 ai 跟前端结合的那也非常多。 好，他现在正在创建这个项目，正在帮我编辑，我来看一下这个编辑完了没有。那 helloworld js 你 看是不是帮我写完了啊？当然这就是个简单的事例啊，帮，我已经写完了。好，那我现在比如说再给他改成 type script 版本，他自己再重新帮我写，我们待会等他写完之后，我们直接来看就行了啊，这个项目是用的 type script 来写的，那大家知道的还有一个叫 cloud bot 啊，这个是号称可以直接去 那个硅谷的，硅谷最近开发了这个，这个发布了还没多久，叫 cloud boot。 这个呢，可以直接去操控你的电脑完成任何事情啊，比如说操控你的这个 mac， 或者操控你的 linux 来去做任何事情。那你可以看一下这个项目，点进去之后，你其实也会发现它的 type script 成分也很高。看到没有？八十二点五 啊，这个项目也是八十二点五，里面呢只也只是用了少量的这个，其他的什么 swift 和这些就是做 micros 端的一个容那个兼容处理，或者说一些平台化的一些差异化的抹平，其他的都是基于 type script。 好， 那这里我不再不多说了啊，再不多说了，这个项目呢，同样，呃，开源了也才可能一周左右的时间吧，应该 现在 star 数六万多啊，大家也可以去下了试一试。虽然说那个用起来的感觉就好像是指挥一个七十岁的老头来操作你的电脑，但是呢，这也是未来一个趋势，等到你哪一天不需要去考虑 token 的 消耗，不需要考虑算力的消耗的时候，这种产品终将是未来的一个趋势 啊，他能够去帮你做任何事情，帮你处理 word 文档，帮你处理 pdf， 帮你剪视频，帮你回邮件，帮你去发信息，什么所有所有的你只需要在手机上面发个指令，他在电脑端全部帮你去完成啊，就这样的一个项目，这也是基于这个 astropik 跟 open ai 的， 这个大家也可以去了解一下啊。 好，那所以这个我用实际的例子来告诉了大家，为什么现在要学习 ts， 就是 实实在在的这个例子啊， ts 百分百要学，然后再比如什么 doc 等等 啊。那 docker 这个例子呢？也毫无疑问，你看每个项目都会有自己的 docker file， docker file sandbox 和 docker file sandbox browser， 一定会有它的打包构建，所有的这些逻辑都是基于 docker。