$stateh2

这个 rune 用来创建一个响应式的本地状态，类似 Vue 里的 ref，也像 React 的 useState。

<script>
  let count = $state(0);

  function add() {
    count++;
  }
</script>

<button onclick={increment}>点击次数：{count}</button>

使用 $state 创建的变量可以直接读写，模板中会自动跟踪并更新，非常直观。

$effecth2

当你希望在某个变量变化时触发某个副作用逻辑，比如打印日志、发送请求，就可以用 $effect。

$effect(() => {
  console.log('count 变了：', count);
});

和旧版本的 $: 响应式声明不同，$effect 更像 React 的 useEffect，但写法更简洁， 不需要依赖数组，Svelte 会自动追踪依赖。

$propsh2

在组件中，接收父组件传来的 props，不再使用 export let，而是统一用 $props。

<script>
  let { title } = $props();
</script>

<h1>{title}</h1>

这种方式让 props 成为一个普通对象，不再有语法魔法，利于重构与组合。

$derivedh2

当你想从某些状态派生出一个新值，比如将 count 乘以 2，可以使用 $derived：

let double = $derived(() => count * 2);

每次 count 变化时，double 会自动更新，适用于计算属性场景。