Svelte 引入 Runes 新语法

Svelte 团队在其博客文章中介绍了名为 runes 的新语法，旨在更好地表达 Web 应用中的响应式依赖关系。这一新语法有望提高复杂 Web 应用的可维护性，进一步增强 Svelte 的企业级适用性。

现有响应式依赖的局限性

在 Svelte 3 中，响应式依赖主要在组件级别通过 .svelte 文件定义。组件可以封装局部的响应式依赖（使用 let var 语法），或者通过 export let var 语法显式声明外部响应式依赖，供其他组件使用。对于既不局限于组件内也不方便暴露在组件接口中的响应式依赖，开发者可以使用 Svelte Stores。

Svelte 的单文件组件（SFC）鼓励开发者将组件的样式、内容和行为放在同一个文件中。这种设计在三个部分紧密相关时非常有效，但如果样式或行为与组件的关联较弱，可能会导致维护问题或代码冗余。

Svelte Stores 的特点

Svelte Stores 是标准的 JavaScript 文件，类似于 RxJS 的 observables，至少提供了 .subscribe 接口，允许调用者响应存储中的值变化。Stores 与应用的组件架构解耦，只要保持接口不变，就可以独立演化。

Runes 的引入及其优势

Svelte 团队认为，现有的 Stores API 在处理复杂应用时可能变得笨拙，尤其是在需要跨多个地方使用相同逻辑时。为此，他们提出了 runes 作为替代方案，提供了 $state、$derived 和 $effect 三个新的原语：

<script>
    let { width, height } = $props(); // 替代 `export let`

    const area = $derived(width * height);

    $effect(() => {
        console.log(area);
    });
</script>

这些新原语可以在 .js、.ts 和 .svelte 文件中使用。通过显式声明响应式依赖，开发者可以更清晰地理解和管理这些依赖关系，同时也为编译器优化提供了可能，从而提升应用性能。

开发者反应

开发者对新语法的反应褒贬不一。一些开发者认为新语法解决了现有问题，但感觉与 Svelte 原本接近原生 JavaScript 的风格有所不同。有 Vue 开发者表示，新语法让他们感到熟悉，尤其是可以在 .js 或 .ts 文件中重用组件逻辑。还有开发者认为，新语法带来了类型化的 props 和更好的响应式代码编写方式。

Svelte 5 的现状

Svelte 5 目前仍处于早期阶段，尚未准备好用于生产环境。开发者可以通过预览网站了解新特性并进行交互式体验。

总结

Svelte 的 runes 新语法旨在简化复杂应用中的响应式依赖管理，提供更清晰的代码结构和更好的性能优化潜力。尽管开发者对新语法的态度不一，但它无疑为 Svelte 的未来发展提供了新的可能性。