vlambda博客
学习文章列表

新的一周，快来看看上周发生了哪些新鲜事吧！

科技趣闻

1. Vue 全新中文文档发布

近期，Vue发布全系官方文档，全新的文档主要有以下变化：

• 深色模式；
• 响应式设计；
• 风格切换功能；
• 互动教程；
• 新增范例；
• 优化搜索；
• 重做指导；
• 单页面导航；
• VitePress构建；
• 水合静态内容。

Vue 全新文档：https://vuejs.org/

Vue 全新中文文档：https://staging-cn.vuejs.org/

Vue 全新中文文档更新详情：https://juejin.cn/post/7077701166397653028

2. Vitest 全新中文文档发布

近期，Vitest 发布全新中文文档。

Vitest 是一个由 Vite 提供支持的极速单元测试框架。其特性如下：

• 与Vite通用的配置、转换器、解析器和插件；
• 使用你的应用程序中的相同配置来进行测试；
• 智能文件监听模式，就像是测试的 HMR；
• 支持测试 Vue、React、Lit 等框架中的组件；
• 开箱即用的 TypeScript / JSX 支持；
• ESM 优先，支持模块顶级 await；
• 通过 tinypool 使用 Worker 线程尽可能多地并发运行；
• 套件和测试的过滤、超时、并发配置；
• Jest 的快照功能；
• 内置 Chai 进行断言 + 与 Jest expect 语法兼容的 API；
• 内置用于对象模拟(Mock)的 Tinyspy；
• 使用 jsdom 或 happy-dom 用于 DOM 模拟；
• 通过 c8 来输出代码测试覆盖率；
• 类似于 Rust 语言的源码内联测试。

Vitest 全新中文文档：https://cn.vitest.dev/

3. Pinia 正式成为 Vue 官方默认推荐的状态管理库

近期，Pinia 正式成为 Vue 官方默认推荐的状态管理库。

Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。Pinia.js 有如下特点：

• 完整的 TypeScript 的支持；
• 足够轻量，压缩后的体积只有1.6kb;
• 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
• actions 支持同步和异步；
• 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
• 无需手动添加 store，store 一旦创建便会自动添加；

Pinia 官网：https://pinia.vuejs.org/

4. Google向32亿Chrome用户发出紧急安全警告：呼吁尽快更新

近日 Google 向 32 亿 Chrome 用户发出紧急安全警告，因为 Google 已确定攻击者已使用这个高严重性 Zero-Day 漏洞 CVE-2022-1096 作出攻击。因此，Google Chrome 推出了99.0.4844.84 新版。之前，Google 很少为一个单一的安全漏洞推出新版本，严重性可见相当严重，建议所有 Chrome 用户尽快更新。

更新速递

1. React 18.0 正式发布

3月30日，React正式宣布 React v18.0 正式发布，React 18 主要更新内容如下：

• 自动批处理；
• Transitions；
• 新的Suspense 功能；
• 新的客户端和服务器渲染 API；
• 新的严格模式行为；
• 全新的hooks：useId、useTransition、useDeferredValue、useSyncExternalStore、useInsertionEffect

更新详情：https://reactjs.org/blog/2022/03/29/react-v18.html

2. Electron 18.0 正式发布

3月30日，Electron 官方团队宣布正式发布Electron 18.0.0。Electron 18.0 主要更新内容如下：

• 支持 Chromium 100；
• 支持 Node.js 16.13.2；
• 支持 V8 10.0；
• 添加了ses.setCodeCachePath()API 用于设置代码缓存目录；
• 删除了基于BrowserWindowProxy的window.open的旧实现，这也删除了webPreferences中的nativeWindowOpen选项；
• 将“focus”和“blur'”事件添加到WebContents；
• 在 macOS 上添加了 Substitutions 菜单角色：showSubstitutions, toggleSmartQuotes, toggleSmartDashes, toggleTextReplacement；
• 在app.requestSingleInstanceLock()flow 中添加了first-instance-ack事件，这样用户就可以从第二实例向第一实例传递一些数据；
• 在setBackgroundColor中增加了对更多颜色格式的支持。

更新详情：https://www.electronjs.org/blog/electron-18-0

3. Chrome 100 正式发布

3月30日，谷歌发布了新版本 Chrome 浏览器，版本号为100。包括Mac、Windows和安卓、iOS平台均已更新。Chrome 100使用新的图标，简化了品牌图标，去掉了阴影，细化了比例，亮化了颜色，以便与谷歌更现代的品牌表达相一致。

Chrome 100继续大幅减少内存、CPU占用率，速度更快。在Chrome 100中，谷歌取消了“精简模式”。还引入了一个数字商品API。这将使Play Store中的网络应用能够接受数字购买。这实质上是对 Android Play Billing API 的打包，并使提供数字购买的网络应用可以从Play Store中安装。

更新详情：https://developer.chrome.com/blog/new-in-chrome-100/

4. Vite 2.9.0 正式发布

3月30日，Vite v2.9.0 正式发布。该版本主要更新如下：

• 更快的冷启动；
• 开发期间的 CSS Sourcemap 支持；
• 默认情况下避免拆分供应商块；
• Web Worker 增强功能；
• 原始 Glob import；
• envDir变化；
• 插件和框架作者的新工具。

更新详情：https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30

5. React Native 0.68 正式发布

3 月 30 日，React Native 宣布正式发布 React Native 0.68.0 版本。可选择加入新的 React Native 架构、错误修复等。

更新详情：https://reactnative.dev/blog/2022/03/30/version-068

开源趋势

下面来看看上周GitHub上有哪些热门的前端开源项目吧！

1. cider

cider 是一个 基于 Electron 和 Vue.js 的全新跨平台 Apple Music 体验，从头开始编写，并考虑了性能。

Star⭐：2.8k

本周Star⭐️：901

Github：https://github.com/ciderapp/Cider

2. autocomplete

Fig 将自动完成添加到终端。当在终端中输入时，Fig 会在现有的 macOS 终端中弹出子命令、选项和上下文相关的参数。

Star⭐：14.6k

本周Star⭐️：750

Github：https://github.com/withfig/autocomplete

3. Regex-Vis

Regex-Vis 是一个正则表达式可视化器和编辑器。

Star⭐：1.1k

本周Star⭐️：321

Github：https://github.com/Bowen7/regex-vis

4. Photoview

Photoview 是一个简单且用户友好的照片库，专为摄影师设计，旨在提供一种简单快捷的方式来浏览目录，其中包含数千张高分辨率照片。将 Photoview 配置为在文件系统的目录中查找照片和视频。扫描仪会自动拾取您的媒体并开始生成缩略图，以使浏览速度超级快。

Star⭐：2.2k

本周Star⭐️：260

5. Docusaurus

Docusaurus 是Facebook 推出的一个用于轻松构建、部署和维护开源项目网站的项目。可以用于快速搭建文档类网站。

Star⭐：32k

本周Star⭐️：235

Github：https://github.com/facebook/docusaurus

工具推荐

下面来推荐几个热门的 React 状态管理库！

1. Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。

GitHub：https://github.com/reduxjs/redux

2. Mobx

Mobx是一个透明函数响应式编程（Transparently Functional Reactive Programming，TFRP）的状态管理库，它使得状态管理简单可伸缩。

GitHub：https://github.com/mobxjs/mobx

3. Recoil

Recoil 是一个用于 React 应用程序的实验性状态管理库。它提供了一些单独使用 React 难以实现的功能，同时兼容 React 的最新功能。

GitHub：https://github.com/facebookexperimental/Recoil

4. Hookstate

Hookstate 是一个基于 hook 的 React 简单但非常强大且速度极快的状态管理库。它是Redux，Formik 的现代替代品，没有样板性能。它简单易学，使用起来非常灵活。

GitHub：https://github.com/avkonst/hookstate

5. Rematch

Redux 是一个了不起的状态管理工具，由健康的中间件生态系统和优秀的开发工具支持。Rematch 以 Redux 为基础，减少样板文件并强制执行最佳实践。

GitHub：https://github.com/rematch/rematch

6. Jotai

Jotai 是一个 React 的原始和灵活的状态管理库。它类似于 Recoil，但具有更小的包大小（3.2 KB vs 21.1 KB)、更简约的 API、更好的 TypeScript 支持、更广泛的文档以及没有实验性标签。

GitHub：https://github.com/pmndrs/jotai

7. Zustand

Zustand 使用简化通量原理的小型、快速和可扩展的熊骨状态管理解决方案。有一个基于钩子的舒适 api。

GitHub：https://github.com/pmndrs/zustand

往期推荐：