框架集成：18 HTML与Svelte集 - 详细教程与实战指南

<!-- Counter.svelte -->
<script>
  // 响应式声明
  let count = 0;

  // 响应式语句
  $: doubled = count * 2;
  $: if (count >= 10) {
    console.log('Count reached 10!');
  }

  // 方法
  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }

  function reset() {
    count = 0;
  }
</script>

<!-- 模板：接近原生HTML -->
<div class="counter">
  <h1>计数器: {count}</h1>
  <p>双倍: {doubled}</p>

  <!-- 事件绑定 -->
  <button on:click={increment}>+1</button>
  <button on:click={decrement}>-1</button>
  <button on:click={reset}>重置</button>

  <!-- 条件渲染 -->
  {#if count > 5}
    <p class="warning">计数已超过5!</p>
  {:else}
    <p>计数正常</p>
  {/if}
</div>

<!-- 样式：自动scoped -->
<style>
  .counter {
    text-align: center;
    padding: 20px;
  }
  h1 { font-size: 48px; }
  button {
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  .warning { color: #e74c3c; }
</style>

<script>
  // 1. 响应式变量赋值
  let name = 'Svelte';
  let count = 0;

  // 赋值即触发更新（Svelte的核心机制）
  function handleClick() {
    count += 1;  // 赋值触发更新
  }

  // 2. 响应式声明 ($:)
  $: doubled = count * 2;           // 响应式计算
  $: fullName = firstName + ' ' + lastName;

  // 3. 响应式语句
  $: console.log('count changed:', count);  // 每次count变化执行

  // 4. 响应式块
  $: {
    console.log('count:', count);
    console.log('doubled:', doubled);
  }

  // 5. 响应式条件
  $: if (count > 10) {
    console.log('Count exceeded 10!');
  }

  // 6. 数组/对象的响应式更新
  let items = [1, 2, 3];
  function addItem() {
    items = [...items, items.length + 1];  // 必须重新赋值!
    // items.push(4) 不会触发更新!
  }

  let user = { name: '张三', age: 25 };
  function updateAge() {
    user = { ...user, age: user.age + 1 };  // 必须重新赋值!
    // user.age++ 不会触发更新!
  }

  // 7. Store（跨组件状态）
  import { writable, derived } from 'svelte/store';
  const countStore = writable(0);
  const doubledStore = derived(countStore, $c => $c * 2);

  // 使用Store（自动订阅）
  $: $countStore;  // 通过$前缀访问store值
</script>

<!-- 使用 -->
<p>{$countStore}</p>
<button on:click={() => $countStore += 1}>+1</button>

# 使用SvelteKit（推荐）
npm create svelte@latest my-app
cd my-app
npm install
npm run dev

# 使用Vite + Svelte
npm create vite@latest my-app -- --template svelte
cd my-app
npm install
npm run dev

# 在线REPL
# https://svelte.dev/repl

# Svelte组件文件结构
src/
  lib/
    Counter.svelte    # 组件
    stores.js         # Store
  routes/
    +page.svelte      # 页面(SvelteKit)
    +layout.svelte    # 布局(SvelteKit)
  app.html            # HTML模板

<!-- 不推荐：直接修改数组/对象 -->
<script>
let items = [1, 2, 3];
function addItem() {
  items.push(4);  // 不会触发更新!
}
</script>

<!-- 推荐：重新赋值 -->
<script>
let items = [1, 2, 3];
function addItem() {
  items = [...items, 4];  // 触发更新
}
</script>

<!-- 不推荐：复杂的响应式声明 -->
$: result = items.filter(i => i.active).map(i => i.name).sort().join(', ');

<!-- 推荐：使用函数 -->
function getActiveNames() {
  return items.filter(i => i.active).map(i => i.name).sort().join(', ');
}
<p>{getActiveNames()}</p>

<!-- 推荐：Props声明带默认值 -->
<script>
export let title = '默认标题';
export let size = 'medium';
export let disabled = false;
</script>