Svelte はコンパイル時に何をやっているのか？

<!-- Svelteコンポーネント -->
<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  let message = $derived(`Count is ${count}`);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>
<p>{doubled}</p>
<p>{message}</p>

// 簡略化したコンパイル結果
let count = 0;
let doubled, message;

// 依存関係を事前に把握し、必要な更新のみ実行
function update_count(value) {
  count = value;
  // コンパイラが依存を解析済み
  doubled = count * 2;
  message = `Count is ${count}`;
  
  // 影響を受ける要素だけを直接更新
  button.textContent = `Clicked ${count} times`;
  p1.textContent = doubled;
  p2.textContent = message;
}

状態変更 → 新Virtual DOM生成 → 旧Virtual DOMと比較 → 差分を実DOMに適用

状態変更 → 事前に特定された箇所のみ直接更新

// React/Vueの場合（実行時に差分計算）
function render() {
  const newVDOM = {
    type: 'div',
    children: [
      { type: 'h1', props: { children: count }},
      { type: 'p', props: { children: doubled }}
    ]
  };
  // ここで差分計算が発生
  diff(oldVDOM, newVDOM);
}

// Svelteの場合（コンパイル時に更新箇所を特定）
function update(count) {
  // 変更箇所を直接更新（差分計算なし）
  h1.textContent = count;
  p.textContent = count * 2;
}

<!-- Svelteコンポーネント -->
<script>
  import { onMount, afterUpdate, beforeUpdate } from 'svelte';
  
  // onMountのみ使用
  onMount(() => {
    console.log('mounted');
  });
</script>

{#if visible}
  <div>Content</div>
{/if}

// ブロックの作成・破棄を効率的に管理
let if_block = visible ? create_if_block() : null;

function update(visible) {
  if (visible) {
    if (!if_block) {
      if_block = create_if_block();
      if_block.mount(target);
    }
  } else if (if_block) {
    if_block.destroy();
    if_block = null;
  }
}

@Component({
  selector: 'app-todo',
  template: `
    <div *ngFor="let todo of todos$ | async">
      {{ todo.text }}
    </div>
  `
})
export class TodoComponent {
  todos$ = this.todoService.getTodos();
  
  constructor(private todoService: TodoService) {}
}

<script lang="ts">
  let todos = $state([]);
  
  // 直接的でシンプル
  onMount(async () => {
    todos = await fetchTodos();
  });
</script>

{#each todos as todo}
  <div>{todo.text}</div>
{/each}