MoonWebTeam前端技术月刊致力于分享和推广前端技术的最新进展和优秀文章。本期月刊主要收集 2024 年 2 月至 3 月期间的技术热点的优秀文章。我们在推荐文章的同时，也会分享团队内小伙伴对这些文章的深度解读与独到见解，以期为读者提供更多的思考角度和实践参考。欢迎广大 Web 前端技术爱好者关注MoonWebTeam前端团队，一起探索前端技术的无限可能！
1、前端会议
1.1、Vue 2024 大会
文章链接：
2024 Vue 阿姆斯特丹大会落幕，Vue 的十年，如何进入开悟之坡？
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性-CSDN博客
简介： Vue 2024 大会主要包含这几部分内容：Vue 10 年的开发历程和成果、对比其他框架的技术亮点和贡献、以及未来框架发展的方向和规划。
见解与看法：
在 Vue 2024 大会的十年回顾中，比较值得一提的 Vue 这十年间的技术贡献有：
- Vue 是首个基于深度跟踪的响应式系统的框架。React 不直接追踪每个变量的变化，而是自顶向下的进行递归更新；而 Angular 依赖”脏检查“实现深度响应式，Vue 基于对象的属性拦截实现响应式，有两个好处，一是状态管理非常简单，它的数据模型是普通的 JavaScript 对象，当你修改它们时，视图会自动进行更新，开发者完全不必在意状态何时需要更新。二是性能更好，能够通过依赖收集精确更新变化的组件。
- Vue 是首个将单文件组件概念与构建工具相结合的框架，提供 SFC 编译器和构建工具结合，将单文件组件预编译为标准的 JavaScript 与 CSS，这在当时是前所未有的。主要是为了提供一种更加模块化、可维护、高效的开发方式，让本来就强相关的关注点自然内聚。
- Vue3 中的 Composition API 是第一个将 Signal 样式的响应性与现代组件模型结合在一起的。通俗点讲，Signal 是一个具有 .value 属性并保存某些值的对象。当 Signal 的值变化时，从组件内访问 Signal 的 value 属性会自动更新该组件。
- Vue 是第一个探索如何将在编译阶段实现响应式转换的框架。运行时响应式会受到 JavaScript 语法的制约，导致需要一些例如 Vue ref 这样的值的容器，但是由于放弃 .value 实现响应式变得困难，且一些用户选择仅在 SFC 内使用响应式转换，这导致了不一致性和在不同心智模型之间切换的成本的原因，因此这方向并不是适合于 Vue，所以 Vue 已经选择放弃编译时响应式转换，不过其他框架也在尝试向这个方向发展，例如 Svelte 5。具体原因可参考：github.com/vuejs/rfcs/…
对于我们在开源方面的一些启示：
- 永不言弃，要有技术追求： 参与开源项目，作为一个维护者的你，都会经历过一个非常类似的过程：每当新技术出现时，总会有一个起始点。然后是期望过高的高峰期，也就是所谓的炒作期，人们对此感到兴奋，认为这将是有史以来最好的东西，将是未来的方向。但当你开始在生产环境中使用它时，你可能会意识到它还未完全准备好。
引用自会议中的话：“必须跨越完美主义者的鸿沟，意识到你的项目不必完美，也许它不能解决每个人的问题，但如果它能解决某人的问题，那就足够好了。然后，你重新获得能量和信心，继续改进它，但如果你能坚持下去，你最终会达到开悟之坡。最后，达到生产力的高原。”
- 拥抱开源社区： 在本次演讲中，尤大再三强调社区的重要性：没有社区的支持，将无法度过所有开源之旅中所遇到的低谷，Vue 社区确实是我在这整个旅程中最为骄傲的部分，也是一直鼓舞前行的动力。
Vue 未来与我们相关的发展动向：
- 框架性能优化：通过优化代码，减少大型 reactive 的访问开销，提高 reactive 效率和减少内存占用。
- 页面性能优化：专注于 SSR 改进、懒水合、Suspense 稳定版本、 无虚拟 DOM 的 Vapor Mode。我们可以看到，各大框架会相互借鉴其他框架的特性，比如 React 中的 Suspense、Qwik 中的懒水合、Solid 中的 Vapor Mode等。
- 开发体验优化：使用 Rust 开发 Rolldown，为了从根本上解决之前 Vite 为满足不同的构建需求同时使用了 Esbuild 和 Rollup 的弊端，同时使用两种构建工具输出差异所带来的多次解析、转换和序列化造成的不必要的性能开销，因此 Vite 目标是整合一个单一的、性能卓越的打包工具，既能减少解析和序列化开销，又能与 Rollup 插件生态兼容，值得我们保持持续关注。
2、AIGC
2.1、Sora
文章链接：
解析：OpenAI今天刷屏的Sora模型，是如何做到这么强的？ | 人人都是产品经理 爆火的OpenAI-Sora运作原理 - 掘金
Open Ai最近发布了文生视频大模型Sora，会对我们的生活以及工作带来什么影响？ - 知乎
简介：
在今年 2月 15 日，OpenAI 发布超级视频模型 Sora，寥寥几个视频 demo，掀起了整个 AI 界的轰动。Sora 可以根据提示词生成长达一分钟的视频，其生成的视频画质、连续性、光影等都令人叹为观止，这无疑是 AGI 领域的新的里程碑。
见解与看法：
Sora 的基本原理：
- 通过视频压缩网络将原始视频压缩成一个低维的潜在空间，同时保留了视频的关键特征。
- 将压缩后的数据分解为时空补丁，这些补丁不仅包含了空间上的信息（即图像的一部分），也包含了时间上的信息（即随时间变化的信息），如下图所示，Sora 可以同时捕捉到视频中的空间细节和时间动态。
- 基于 Transform 的扩散模型，将扩散过程早期的视频补丁标记序列作为输入，并预测原始的“去噪”标记，通过对数百万个不同视频进行训练，Sora 慢慢学习了自然视频帧的模式和语义。与 GAN 对抗模型相比，扩散模型并不是机械的仿作，而是在学习大量先作的时候，学会了图像内涵与图像之间的关系。
- 后续用户给 Sora 输入提示词的时候，会先由 GPT 根据用户的提示词进行扩写，然后将扩写的提示词交给 Sora，这样能更好地让 Sora 遵循提示词来生成更精准的视频。
优点：
缺点：
-
物理模拟不准确：难以准确模拟复杂场景的物理原理，并且可能无法理解因果关系的具体实例
-
对象凭空出现：视频中可能会出现对象的无缘无故出现，这表明模型在空间和时间连续性的理解上还有待提高
应用场景：
- 文生视频（text-to-video）
- 图片生成视频：让静态图片动起来。
- 视频生成视频：视频向前向后拓展、编辑视频、视频之间无缝衔接。
- 文生图能力：可以生成可变大小的图像，最高可达2048 × 2048分辨率。
- 拟态能力
2.2、AI 程序员
文章链接：
首个AI软件工程师上线！已通过公司面试抢程序员饭碗，华人创始团队手握10块IOI金牌
微软AI程序员登场，10倍AI工程师真来了？996自主生成代码，性能超GPT-4 30%
AutoDev: Automated AI-Driven Development
简介：
AI在软件工程领域的重大进步，AI程序员如Devin和AutoDev的出现可能会对程序员的工作产生重大影响，提高软件开发的效率和自动化水平。同时，这些AI工具的发展也引发了对未来工作方式和技能需求的讨论。
见解与看法：
AI程序员Devin的出现标志着人工智能在软件工程领域的一个重要进展。Devin不仅具备编程辅助工具的功能，更实现了在AI领域被称为“理解”的突破，这意味着它能够不仅仅是预测下一个单词或代码行，而是能够思考并解决问题的总体方法。AutoDev和Devin都是AI在软件工程领域的重大突破，它们各自有不同的侧重点和优势。AutoDev更侧重于自主执行复杂的软件工程任务和集成开发环境的操作，而Devin则更强调全栈技能。
图选自：微软AI程序员登场，10倍AI工程师真来了？996自主生成代码，性能超GPT-4 30%
Devin的能力体现在多个方面：
- 独立开发能力：Devin能够独立完成软件开发任务，包括任务分析、项目规划、代码编写、调试及部署等全栈开发工作。
- 复杂任务处理：通过将复杂任务拆解为子任务，并利用GPT模型理解和响应这些子任务，Devin能够合并执行结果以完成整个任务。
- 全栈技能和自学能力：Devin配备了包括shell、代码编辑器和web浏览器在内的开发工具，能够自动规划并执行需要数千个决策的复杂任务。它还能自主学习，快速掌握新技术。
- 自动Debug和迭代能力：在遇到错误时，Devin能够利用日志进行调试，并修复bug。它还能根据反馈进行调整，适应成熟的代码库并修改现有的bug。
图选自：首个AI软件工程师上线！已通过公司面试抢程序员饭碗，华人创始团队手握10块IOI金牌
- 长期推理和规划：Devin背后的Cognition AI技术使其能够在每一步回忆相关的上下文，随时间学习，并修复错误。
- 交互体验：Devin提供了优秀的用户体验，整个编程过程都是可视化的，使得产品体验十分出色。 尽管Devin展现出了强大的潜力，但目前它能完成的任务还相对初级。随着技术的不断发展和Devin的自学能力，未来有望实现更多高级功能和应用场景。
2.3、GPT 的衍生产品 Kimi Chat 与 Suno V3
文章链接：
200万上下文！月之暗面Kimi又长长长了，一次处理500个文件，还能读懂甄嬛传了
音乐ChatGPT时刻来临！Suno V3秒生爆款歌曲，12人团队创现象级AI - 知乎
简介：
第一篇文章《200万上下文！月之暗面Kimi又长长长了，一次处理500个文件，还能读懂甄嬛传了》讲述了月之暗面科技有限公司（Moonshot AI）开发的 Kimi 智能助手在处理长文本方面取得的突破。Kimi 的上下文输入长度从 20 万字提升到了 200 万字，这意味着它可以一次性处理更多的信息，例如精读500个文件并支持通过自然语言进行信息查询和筛选。这一技术进步使得 Kimi 能够更有效地分析和理解大量文本，如分析 500 份简历、理解公司的完整财报或梳理大型代码库的结构。Kimi 的这一能力提升是基于无损上下文长度的技术，这是通往 AGI（人工通用智能）的关键基础技术之一。
图选自：200万上下文！月之暗面Kimi又长长长了，一次处理500个文件，还能读懂甄嬛传了
第二篇文章《音乐 ChatGPT 时刻来临！Suno V3 秒生爆款歌曲，12 人团队创现象级 AI - 知乎》介绍了 AI 初创公司 Suno AI 推出的 V3 音乐生成模型。这个模型能够在几秒钟内创作出2分钟的完整歌曲，支持多种音乐风格和流派。Suno V3 的发布在网上引起了广泛关注，许多用户通过这个平台创作了自己的音乐作品。Suno V3 不仅提高了音乐生成的质量，还推出了 AI 音乐水印系统，以保护用户创作不被滥用。Suno 的创始团队由四位机器学习专家组成，他们的目标是让每个人都能轻松创作音乐。Suno V3 的成功也预示着音乐行业的 AI 革新。
图选自：音乐ChatGPT时刻来临！Suno V3秒生爆款歌曲，12人团队创现象级AI - 知乎
AI技术在文本处理和音乐创作两个领域的最新发展，分别由月之暗面科技有限公司和Suno AI初创公司实现。这些进展不仅提升了AI的实用性，也为相关行业的未来发展带来了新的可能性。
见解与看法：
- 关于 Kimi： Kimi是一款由月之暗面科技有限公司开发的人工智能助手，具备处理超长文本的能力，能够应对大量文本信息的处理、文件分析和资料整理总结等办公需求。Kimi的长文本处理能力是其显著特点，相较于其他国产大模型，Kimi在长文本处理方面有着明显的优势。 Kimi的技术进步表现在其处理文本长度的显著提升，从最初的20万汉字增加到了200万汉字，这一进步不仅体现了处理能力的提升，更重要的是无损上下文长度的增加，这对于保持信息的完整性和准确性至关重要。
- 关于 Suno V3： Suno V3是一款专注于音乐创作的人工智能系统，它通过降低音乐创作的门槛，使得普通人也能享受到创作音乐的乐趣。此外，Suno V3还能快速生成音乐作品，适用于视频配乐、游戏配乐等多个领域，并且生成的音乐不存在版权问题。尽管目前Suno V3还未达到大规模商用的水平，但其在影视产业链中已经开始发挥作用。
Suno V3的快速创作能力同样令人印象深刻，它能在几秒钟内创作出长达2分钟的音乐作品，并提供多种音乐风格和流派的选择。尽管在中文歌曲创作方面还有待提高，但其在英文和日语歌曲生成方面已经表现出较好的效果。 综上所述，Kimi和Suno V3这两款产品展示了大模型在实际应用中的价值和商业化潜力，它们的成功实践为市场提供了新的方向，同时也推动了相关技术的发展和创新。
3、框架&语言
3.1、Oxlint
文章链接：
Oxlint General Availability | The JavaScript Oxidation Compiler
最近风靡前端圈的Oxlint会取代Eslint吗？-CSDN博客
简介：
Oxlint 是一种静态代码分析工具，旨在通过检测错误和执行代码样式规则来提高代码质量。与使用 JavaScript 编写的 ESLint 不同，Oxlint 是用 Rust 开发的，具有更加优秀的性能。
见解与看法：
Oxlint 是使用 Rust 开发的类似 Eslint 的 lint 工具，官方宣称执行速度是 Eslint 的 50～100 倍，目标是解决 Eslint 的速度问题。但目前 Oxlint 还不够成熟，尚未支持插件系统，生态也不如 Eslint。期待 Oxlint 后续能够快速迭代和丰富生态的支持。
3.2、Typescript 新特性 using
文章链接：
译：TypeScript 5.2 的新关键词 using – 云谦的博客
简介：
篇文章介绍了 TypeScript 5.2 版本中引入的一个新关键词 using。这个关键词用于处理具有 Symbol.dispose 函数的对象，以便在对象离开作用域时自动释放资源。文章提供了 using 关键词的基本用法示例，并解释了它是如何基于 TC39 提案的，该提案目前已经进入第三阶段，意味着它已经准备好供早期采用者测试。
文章还详细解释了 Symbol.dispose 和 Symbol.asyncDispose 的概念。Symbol.dispose 是JavaScript中的一个新全局符号，用于标记资源，而 Symbol.asyncDispose 用于标记需要异步释放的资源。using 关键词可以与这些符号一起使用，以确保资源得到妥善管理。
此外，文章还提供了两个使用场景的例子：文件句柄和数据库连接。在这两个例子中，using 关键词使得资源管理变得更加简单和直观，因为它允许开发者在代码块结束时自动释放资源，而不需要显式地编写关闭资源的代码。
最后，如果客官觉得文章还不错，👏👏👏欢迎点赞、转发、收藏、关注，这是对小编的最大支持和鼓励，鼓励我们持续产出优质内容。
4、关于我们
MoonWebTeam目前成员均来自于腾讯，我们致力于分享有深度的前端技术，有价值的人生思考。
