Svelte 5中如何处理类数据模型？（含Product示例）

问题背景 #

你之前在Svelte 4中通过类实例实现产品数据管理，但迁移到Svelte 5后遇到响应性缺失、嵌套数组无法追踪更新等问题——这是因为Svelte 5的响应性体系基于Runes，普通类实例的属性变化默认不会被框架追踪。

方案一：使用纯响应式对象（推荐简单场景） #

放弃类定义，直接用类型别名配合$state创建响应式数据，这种方式最简洁，适合不需要封装复杂逻辑的场景：

<script lang="ts">
  // 定义类型
  type Category = {
    name: string;
    description: string;
  };

  type Product = {
    id: number;
    name: string;
    description: string;
    categories: Category[];
  };

  // 初始化响应式数据
  let products = $state<Product[]>([]);
  let productForAdd = $state<Product>({
    id: 0,
    name: "",
    description: "",
    categories: []
  });

  // 临时变量用于新增分类
  let newCatName = $state("");
  let newCatDesc = $state("");

  function addProduct() {
    // 生成唯一ID（这里用时间戳示例）
    const newProduct = { ...productForAdd, id: Date.now() };
    products = [...products, newProduct];
    
    // 重置表单
    productForAdd = {
      id: 0,
      name: "",
      description: "",
      categories: []
    };
  }

  function addCategory() {
    if (newCatName.trim()) {
      productForAdd.categories.push({
        name: newCatName,
        description: newCatDesc
      });
      // 清空分类输入框
      newCatName = "";
      newCatDesc = "";
    }
  }
</script>

<!-- 产品添加表单 -->
<div class="add-form">
  <input bind:value={productForAdd.name} placeholder="产品名称" />
  <input bind:value={productForAdd.description} placeholder="产品描述" />

  <!-- 分类添加区域 -->
  <div class="category-add">
    <input bind:value={newCatName} placeholder="分类名称" />
    <input bind:value={newCatDesc} placeholder="分类描述" />
    <button on:click={addCategory}>添加分类</button>
  </div>

  <button on:click={addProduct}>添加产品</button>
</div>

<!-- 产品列表展示 -->
<div class="product-list">
  {#each products as product}
    <div class="product-item">
      <div>ID: {product.id}</div>
      <div>名称: {product.name}</div>
      <div>描述: {product.description}</div>
      <div class="categories">
        <span>分类：</span>
        {#each product.categories as category}
          <span>{category.name} - {category.description}</span>
        {/each}
      </div>
    </div>
  {/each}
</div>

方案二：让类具备响应性（适合复杂逻辑场景） #

如果需要保留类的封装能力（比如添加方法处理数据），可以在类内部使用$state标记每个需要响应的属性，包括嵌套数组：

<script lang="ts">
  class Category {
    // 用$state标记响应式属性
    name = $state("");
    description = $state("");

    constructor(name = "", description = "") {
      this.name = name;
      this.description = description;
    }
  }

  class Product {
    id = $state(0);
    name = $state("");
    description = $state("");
    // 数组也要用$state声明，才能追踪push/splice等操作
    categories = $state<Category[]>([]);

    constructor(id = 0, name = "", description = "", categories: Category[] = []) {
      this.id = id;
      this.name = name;
      this.description = description;
      this.categories = categories;
    }

    // 可以添加类方法封装逻辑
    addCategory(category: Category) {
      this.categories.push(category);
    }
  }

  // 响应式产品列表和待添加产品实例
  let products = $state<Product[]>([]);
  let productForAdd = $state(new Product());

  function addProduct() {
    // 复制当前待添加产品的数据，避免引用问题
    const newProduct = new Product(
      Date.now(),
      productForAdd.name,
      productForAdd.description,
      [...productForAdd.categories]
    );
    products = [...products, newProduct];
    
    // 重置待添加产品实例
    productForAdd = new Product();
  }

  function addNewCategoryToProduct() {
    productForAdd.addCategory(new Category());
  }
</script>

<!-- 产品添加表单 -->
<div class="add-form">
  <input bind:value={productForAdd.name} placeholder="产品名称" />
  <input bind:value={productForAdd.description} placeholder="产品描述" />

  <!-- 分类编辑区域 -->
  <div class="category-edit">
    {#each productForAdd.categories as category, index}
      <div class="category-item">
        <input bind:value={category.name} placeholder="分类名称" />
        <input bind:value={category.description} placeholder="分类描述" />
        <button on:click={() => productForAdd.categories.splice(index, 1)}>删除</button>
      </div>
    {/each}
    <button on:click={addNewCategoryToProduct}>添加分类</button>
  </div>

  <button on:click={addProduct}>添加产品</button>
</div>

<!-- 产品列表展示 -->
<div class="product-list">
  {#each products as product}
    <div class="product-item">
      <div>ID: {product.id}</div>
      <div>名称: {product.name}</div>
      <div>描述: {product.description}</div>
      <div class="categories">
        <span>分类：</span>
        {#each product.categories as category}
          <span>{category.name} - {category.description}</span>
        {/each}
      </div>
    </div>
  {/each}
</div>

关键注意事项 #

1. Svelte 5中只有通过$state、$derived等runes标记的数据才具备响应性，普通类实例的属性修改不会触发视图更新。
2. 对于数组类型，必须用$state<Category[]>([])声明，才能追踪数组的push、splice等操作。
3. 添加产品时要避免引用复用，需要创建新的对象/实例，否则修改productForAdd会影响已添加的产品。

内容的提问来源于stack exchange，提问作者Сергей Горбулев