1
<script>
2
  // Svelte 4：赋值触发更新，编译器负责追踪
3
  let count = 0
4

5
  function increment() {
6
    count += 1  // 编译器识别赋值，自动插入 $$invalidate 调用
7
  }
8

9
  $: doubled = count * 2  // $: 标签 = 响应式声明
10
  $: console.log('count changed:', count)  // $: 也能做副作用
11
</script>
12

13
<button on:click={increment}>
14
  {count} × 2 = {doubled}
15
</button>

1
function instance($$self, $$props, $$invalidate) {
2
  let count = 0
3
  let doubled
4

5
  function increment() {
6
    $$invalidate(0, count += 1)  // 编译器插入的更新通知
7
  }
8

9
  // $: 声明被编译为 beforeUpdate 钩子中的脏检查
10
  $$self.$$.update = () => {
11
    if ($$self.$$.dirty & 1) {  // bit 0 = count
12
      $$invalidate(1, doubled = count * 2)
13
    }
14
    if ($$self.$$.dirty & 1) {
15
      console.log('count changed:', count)
16
    }
17
  }
18

19
  return [count, doubled, increment]
20
}

1
<script>
2
  // $state：声明响应式状态
3
  let count = $state(0)
4
  let items = $state([1, 2, 3])
5

6
  // $derived：派生值（替代 $: x = ...）
7
  let doubled = $derived(count * 2)
8

9
  // $derived.by：复杂派生逻辑
10
  let stats = $derived.by(() => {
11
    const sum = items.reduce((a, b) => a + b, 0)
12
    return { sum, avg: sum / items.length }
13
  })
14

15
  // $effect：副作用（替代 $: console.log(...)）
16
  $effect(() => {
17
    console.log('count is now', count)
18
    // 自动追踪依赖，自动清理
19
  })
20

21
  function increment() {
22
    count += 1        // ✅ 直接赋值
23
    items.push(4)     // ✅ push 也能触发更新了！
24
  }
25
</script>
26

27
<button onclick={increment}>
28
  {count} × 2 = {doubled}
29
</button>

1
<script>
2
  let user = $state({
3
    name: 'Alice',
4
    address: {
5
      city: 'Shanghai'
6
    },
7
    hobbies: ['coding']
8
  })
9

10
  function update() {
11
    user.name = 'Bob'                    // ✅ 触发更新
12
    user.address.city = 'Beijing'         // ✅ 深层属性也行
13
    user.hobbies.push('reading')          // ✅ 数组方法也行
14
  }
15
</script>
16

17
<p>{user.name} lives in {user.address.city}</p>
18
<p>Hobbies: {user.hobbies.join(', ')}</p>

1
// Vue 3 - Composition API
2
const count = ref(0)
3
const doubled = computed(() => count.value * 2)
4
watchEffect(() => console.log(count.value))
5

6
// Svelte 5 - Runes
7
let count = $state(0)
8
let doubled = $derived(count * 2)
9
$effect(() => console.log(count))
10

11
// Solid.js - Signals
12
const [count, setCount] = createSignal(0)
13
const doubled = createMemo(() => count() * 2)
14
createEffect(() => console.log(count()))
15

16
// Angular - Signals
17
const count = signal(0)
18
const doubled = computed(() => count() * 2)
19
effect(() => console.log(count()))
20

21
// Preact - Signals
22
const count = signal(0)
23
const doubled = computed(() => count.value * 2)
24
effect(() => console.log(count.value))