版本信息
Node.js 23 正式发布
10 月 17 日，Node.js 23.0.0 正式发布。该版本的主要更新包括：
- 默认启用
require(esm)：这个功能允许通过require()加载原生 ES 模块，之前在 v20.x 和 v22.x 版本中需要通过命令行标志--experimental-require-module来启用。尽管这个功能仍然是实验性的，但已经默认启用，以便收集用户反馈。 - 移除对 Windows 32位系统的支持：Node.js 23.0.0 版本不再支持 32 位 Windows 系统。
- 稳定化
node --run命令：此命令现在已被正式认定为稳定功能。 - 测试运行器增强：包括对覆盖文件的 glob 模式支持等。
此外，Node.js 23.0.0 还引入了多项其他值得注意的更改，包括但不限于：
- 构建系统和依赖项的更新，例如移除对32位 Windows 的支持，以及对 V8 和其他依赖项的更新。
- 模块系统的改进，例如实现 "module-sync" 导出条件。
- 路径（path）模块新增
matchGlob方法。 - 标准库的改进，包括 Buffer、Crypto、FS、Net、TLS 等模块的更新。
- 测试运行器和工具的改进，以提高测试的可靠性和覆盖率。
- 文档的更新，以反映新功能和行为的变化。
Node.js 23.0.0 将在未来六个月内作为“Current”发布线，直到2025年4月。之后，它将进入长期支持（LTS）阶段。
Node.js 23 更新详情：https://nodejs.org/en/blog/release/v23.0.0
Tauri 2.0 正式发布：已支持 iOS 和 Android
Tauri 是一个用于构建适用于所有主要桌面（macOS、Linux、Windows）和移动（iOS、Android）平台的轻量级快速二进制文件的框架。开发者可以集成任何编译为 HTML、JavaScript 和 CSS 的前端框架。Tauri 提供了一种更现代、更安全且资源效率更高的方法来构建跨平台桌面应用！Tauri 直接对标 Electron。
Tauri 2.0 引入了许多新特性和改进，包括：
- 移动支持：添加了对 iOS 和 Android 的支持。
- 多 WebView 支持：支持在应用中使用多个 WebView，通过不稳定特性标志启用。
- rustls-tls 特性标志：添加了对 rustls TLS backend 的支持。
- 窗口阴影选项：创建 WebView 窗口时添加了设置窗口阴影的选项。
- IPC 模块：添加了新的 IPC 模块，支持原始数据传输。
- 文件系统模块：添加了新的文件系统模块和 API。
- 自动启动：支持应用在系统启动时自动启动。
- 条形码扫描器：允许移动应用使用相机扫描条形码。
- 生物识别：在 Android 和 iOS 上提示用户进行生物识别验证。
- 剪贴板访问：读取和写入系统剪贴板。
- 命令行界面：解析命令行界面的参数。
- 深度链接：将 Tauri 应用程序设置为 URL 的默认处理程序。
- 对话框：打开和保存文件的原生系统对话框。
- 全局快捷键：注册全局快捷键。
- HTTP 客户端：使用 Rust 编写的 HTTP 客户端。
- 本地主机：在生产应用程序中使用本地主机服务器。
- 日志记录：可配置的日志记录。
- NFC：在 Android 和 iOS 上读取和写入 NFC 标签。
- 通知：向用户发送原生通知。
- 操作系统信息：读取操作系统信息。
- 持久作用域：在文件系统上持久化运行时作用域更改。
- 定位器：将窗口移动到常见位置。
- 进程访问：访问当前进程。
- Shell：访问系统 Shell，使用默认应用程序管理文件和 URL，并生成子进程。
- 单实例：确保 Tauri 应用只有一个实例在运行。
- SQL：为前端提供了与 SQL 数据库通信的接口。
- 存储：持久化键值存储。
- 加密数据库：提供加密、安全的数据库。
- 系统托盘：添加了系统托盘支持。
- 自动更新：为 Tauri 应用程序提供应用内更新。
- 文件上传：通过 HTTP 上传文件。
- WebSocket：使用 Rust 客户端在 JavaScript 中打开 WebSocket 连接。
- 窗口自定义：自定义窗口状态，包括窗口大小和位置。
TypeScript 5.6 正式发布，新特性一览！
9 月 10 日，TypeScript 5.6 正式发布，该版本带来了许多新功能和修复，以下是一些主要更新：
- 语言服务搜索 tsconfig.json 文件的回滚：由于可能导致打开许多引用项目的问题，TypeScript 5.6回滚了beta版本中关于语言服务如何搜索 tsconfig.json 文件的更改。团队正在研究在TypeScript 5.7中重新引入此功能的方法。
- 类型重命名：BuiltinIterator类型已重命名为IteratorObject。此外，还添加了一些子类型，如ArrayIterator、MapIterator等。
- 新增 --stopOnBuildErrors 标志：在--build模式下，如果项目构建出现任何错误，将停止继续构建其他项目。
- 编辑器功能增强：包括对提交字符的直接支持和自动导入的排除模式。
- 禁止空值和真值检查：TypeScript 5.6 现在会在编译时捕获可能导致意外行为的空值和真值检查。
- 迭代器辅助方法：引入了对 ECMAScript 提案的支持，为生成器和其他可迭代对象添加了 map、filter、take 等数组方法。
- IteratorObject 类型：为了解决原生迭代器和 TypeScript 类型系统之间的冲突，引入了 IteratorObject 类型。
- 严格的内置迭代器检查：引入了BuiltinIteratorReturn类型和--strictBuiltinIteratorReturn标志，以更严格地检查迭代器的返回类型。
- 支持任意模块标识符：允许在模块导入中使用字符串字面量作为导入名称。
- 新增 --noUncheckedSideEffectImports 选项：用于捕获无法解析的副作用导入，避免潜在的拼写错误。
- 新增 --noCheck 选项：允许跳过所有输入文件的类型检查，以加快构建速度。
- 允许 --build 模式下的中间错误：在构建模式下，即使依赖项中存在中间错误，也会继续构建项目。
- 区域优先诊断：在大型文件中，TypeScript现在可以更快地提供诊断信息。
- 细粒度提交字符：TypeScript 现在为每个自动完成项提供自己的提交字符，使得编辑器可以更智能地自动完成代码。
- 自动导入排除模式：允许通过正则表达式模式排除某些自动导入建议。
更新详情：https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/
Vue 3.5 正式发布
9 月 3 日，Vue 3.5 正式发布，版本代号为 “天元突破红莲螺岩”。下面就来看看该该本都有哪些更新。
Vue 3.5 主要更新概括：
- 响应性系统优化：对 Vue 的响应性系统进行了重大重构，提高了性能和内存使用效率（内存使用减少了56%），同时解决了 SSR 期间由挂起的计算属性导致的过时计算值和内存问题。
- 响应式 Props 解构：在
<script setup>中，从defineProps调用中解构的变量现在默认是响应式的，这简化了声明具有默认值的<font style="color:rgba(0, 0, 0, 0.9);">props</font>的过程。 - 服务端渲染（SSR）改进：
- 延迟水合：异步组件可以通过
defineAsyncComponent的hydrate选项控制何时进行水合。 - useId()：用于生成在服务端和客户端渲染间保持稳定的唯一 ID，适用于表单元素和可访问性属性。
- data-allow-mismatch：允许在客户端值与服务器端值不同的情况下，通过属性来抑制水合不匹配警告。
- 延迟水合：异步组件可以通过
- 自定义元素改进：修复了与
<font style="color:rgb(5, 7, 59);">defineCustomElement()</font>API 相关的许多长期存在的问题，并增加了新功能，如通过configureApp选项支持应用配置，以及访问自定义元素的宿主元素和影子根。 - 其他值得注意的特性：
- useTemplateRef()：提供了一种新的方式来获取模板引用。
- 延迟Teleport：通过
defer属性，允许<Teleport>组件在当前渲染周期后挂载，解决了目标元素必须在<Teleport>组件挂载时存在的限制。 - onWatcherCleanup()：引入了一个全局导入的 API，用于在
<font style="color:rgb(6, 6, 7);">watch</font>中注册清理回调。
Vue 3.5 更新详情：https://blog.vuejs.org/posts/vue-3-5
其他分享
Vue3.5+ 版本中，Watch 的 3 种最新使用方式！
Vue 3.5 版本带来了一系列令人兴奋的新特性，其中对 watch 功能的增强尤为引人注目。
这些改进不仅提升了开发效率，还使得响应式数据的监控更加灵活和强大。
让我们一起来看看这些变化，并探讨它们如何帮助我们更好地构建 Vue 应用。
onWatcherCleanup：简化清理逻辑
在 Vue 3.5 之前，我们经常需要在 watch 和 onBeforeUnmount 生命周期钩子中重复编写清理逻辑，这不仅增加了代码的冗余，也使得代码的维护变得更加困难。
Vue 3.5 引入了 onWatcherCleanup 函数，它允许我们在 watch 内部直接指定清理逻辑，从而简化了代码。
import { watch, onWatcherCleanup } from 'vue'
watch(id, (newId) => {
const { response, cancel } = doAsyncWork(newId)
// 如果 `id` 变化，则调用 `cancel`，
// 如果之前的请求未完成，则取消该请求
onWatcherCleanup(cancel)
})这种方式不仅减少了代码的重复，也使得清理逻辑更加集中和清晰。
Watch 返回值增强：更细粒度的控制
Vue 3.5 还增强了 watch 函数的返回值。现在，watch 返回的对象不仅包含停止监视的 stop 方法，还增加了 pause 和 resume 方法，允许我们更细粒度地控制监视器的行为。
const { pause, resume, stop } = watch(source, (newVal, oldVal) => {
// 监视逻辑
});
// 暂停监视
pause();
// 恢复监视
resume();这种增强使得我们可以在需要时暂停监视，例如在编辑表单时暂停对数据的监控，以避免不必要的处理。
watch 指定深度：更精确的深度监听
在 Vue 3.5 之前，watch 的 deep 选项只能设置为 true 或 false，这在需要监听深层嵌套对象时可能会带来性能问题。
Vue 3.5 允许我们通过设置 deep 为整数来指定监听的深度，这样我们可以更精确地控制监听的范围。
watch(reactiveObject, (newVal, oldVal) => {
// 监听逻辑
}, { deep: 2 });这种方式可以减少不必要的性能开销，特别是在处理大型或深层嵌套对象时。
结论
Vue 3.5 对 watch 功能的增强，使得我们能够以更灵活和高效的方式监控响应式数据。无论是通过 onWatcherCleanup 简化清理逻辑，还是通过增强的返回值和深度监听选项来更精确地控制监视行为，这些改进都极大地提升了我们的开发体验。
JS新特性：?=操作符助你告别bug
JavaScript 作为一门动态语言，其错误处理一直是一个让开发者头疼的问题。
传统的try-catch块虽然功能强大，但往往会导致代码结构变得复杂且难以维护。
幸运的是，ECMAScript 提出了一个新的提案——安全赋值操作符（?=），旨在简化错误处理，让代码更加清晰和高效。
JavaScript Safe Assignment Operator (?=): A Complete Guide: https://medium.com/@shahbishwa21/introduction-to-the-safe-assignment-operator-in-javascript-ddc35e87d37c
什么是安全赋值操作符？
安全赋值操作符（?=）是一种新的语法，它允许开发者在赋值时直接处理错误不会抛出异常。这使得错误处理变得更加直观和简洁。
如何使用安全赋值操作符？
假设我们有一个异步函数fetchData，它可能会抛出错误。使用传统的try-catch块，我们需要这样写：
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
} catch (error) {
console.error('Fetch error:', error);
return null;
}
}使用安全赋值操作符，我们可以简化为：
async function fetchData() {
const [error, data] ?= await fetch("https://api.example.com/data").json();
if (error) {
console.error('Fetch error:', error);
return null;
}
return data;
}安全赋值操作符的优点
- 减少代码嵌套：
?=操作符减少了try-catch块的使用，使代码更加简洁。 - 提高可读性：错误处理逻辑更加直观，代码更易于阅读和维护。
- 跨 API 一致性：无论使用哪个 API，都可以使用相同的错误处理方式。
- 提高安全性：自动处理错误，减少因忽略错误而导致的安全风险。
与Symbol.result结合使用
Symbol.result是一个特殊方法，当对象实现了这个方法时，?=操作符可以用来定义自己的错误处理逻辑。例如：
function example() {
return {
[Symbol.result]() {
return [new Error("Error message"), null];
},
};
}
const [error, result] ?= example();
if (error) {
console.error('Error:', error.message);
}递归错误处理
?=操作符还可以递归处理嵌套对象的错误，这对于处理复杂的错误场景非常有用。
const obj = {
[Symbol.result]() {
return [
null,
{ [Symbol.result]: () => [new Error("Nested error"), null] }
];
},
};
const [error, data] ?= obj;异步函数和 Promise
?=操作符与 Promise 和 async/await 无缝协作，使得异步代码中的错误处理变得简单。
const [error, data] ?= await fetch("https://api.example.com");结论
安全赋值操作符（?=）是 JavaScript 错误处理的一次重大进步，它有望减少对try-catch块的依赖，使代码更加清晰和安全。虽然这个提案还在开发中，但它的潜力已经显而易见。
代码示例
最后，让我们通过一个实际的例子来展示?=操作符的用法：
async function getUserData(userId) {
const [error, user] ?= await database.getUser(userId);
if (error) {
console.error('Database error:', error);
return null;
}
return user;
}在这个例子中，如果getUser函数抛出错误，error变量将捕获这个错误，而user变量将为null。这样，我们就可以在不使用try-catch块的情况下优雅地处理错误。
当然，目前这个提案还处于初期阶段，现阶段想要尝试的话需要使用 polyfill：https://github.com/arthurfiorette/proposal-safe-assignment-operator/blob/main/polyfill.js
参考链接
SASS破坏性更新：Mixed Declarations
"CSS正在改变它处理与嵌套规则混合的声明的方式，我们希望确保 Sass 与其行为相匹配。"
从历史上看，如果您在 Sass 中将嵌套规则和声明混合在一起，它会将所有声明拉到规则的开头，以避免不必要地重复外部选择器。例如：
SCSS：
.example {
color: red;
a {
font-weight: bold;
}
font-weight: normal;
}CSS：
.example {
color: red;
font-weight: normal;
}
.example a {
font-weight: bold;
}当纯CSS嵌套(Plain CSS Nesting)首次引入时，它的行为方式是相同的。然而，经过一番考虑， CSS工作组认为按照声明在文档中出现的顺序应用更有意义，如下所示：
SCSS：
.example {
color: red;
a {
font-weight: bold;
}
font-weight: normal;
}CSS：
.example {
color: red;
}
.example a {
font-weight: bold;
}
.example {
font-weight: normal;
}在 Sass 中嵌套规则后使用声明的做法目前已被弃用，目的是通知用户即将到来的变更，并给他们时间使样式表与其兼容。在未来的版本中，Dart Sass 将更改为与普通 CSS 嵌套生成的顺序相匹配。
如果你想提前使用新的 CSS 语义，可以将嵌套声明包裹在 & {} 中：
SCSS：
.example {
color: red;
a {
font-weight: bold;
}
& {
font-weight: normal;
}
}CSS：
.example {
color: red;
}
.example a {
font-weight: bold;
}
.example {
font-weight: normal;
}
Comments NOTHING