在六月份发布了 Svelte 4 之后，紧接着 Svelte 5 即将发布。Svelte 5 最重要的更新是使用函数来替代特定符号（如$:、let、export）来表示响应式，这使得它的语法与 Vue 3 非常相似。

$state 响应式数据#

使用$state来替代原来的let声明响应式数据。Svelte 团队解释说，随着应用变得越来越复杂，很难区分哪些数据是响应式的，这也会导致项目变得难以维护。

<script>
  // let count = 0; // 旧写法
  let count = $state(0)
  const increment = () => {
    count += 1
  }
</script>

<button on:click="{increment}">count is {count}</button>

这个不如命名为 Vue 3 的$ref，Vue 3 已经废弃了$ref语法糖。在 Vue 中，可以这样写：

<script setup lang="ts">
  import { ref } from 'vue'

  let count = ref(0)
  const increment = () => {
    count.value += 1
  }
</script>

<template>
  <button @click="increment">count is {{count}}</button>
</template>

$derived 计算属性#

$derived用来描述响应式数据的计算逻辑，与 Vue 3 的computed相似，不同的是computed参数是计算函数，$derived参数是计算表达式。

Svelte 5：

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

// $: area = width * height; // 旧写法
const area = $derived(width * height)

Vue 3：

import { computed } from 'vue'

const { width, height } = defineProps(['width', 'height'])
const area = computed(() => width * height)

$effect 侦听器#

当数据发生改变时需要做一下操作就需要用到侦听器，Svelte 5 增加了$effect来表示，这个与 Vue3 的 watchEffect相似。

Svelte 5：

let data = $state(null)

$effect(() => {
  console.log(data)
})

Vue 3：

const data = ref(null)

watchEffect(() => {
  console.log(data.value)
})

看到这里，让人不禁有所感慨。Svelte 和 Vue 的相似之处越来越多，但这也可以看作是一件好事，因为我们不需要再学习一门新的框架了。