Svelte中如何构建基于props初始化可变内部状态的组件？

问题本质 #

你遇到的核心问题是：响应式块会在依赖（比如items）变化时无条件执行，直接覆盖内部状态，导致用户的修改被清空；而直接的非响应式赋值又无法在props更新时同步初始状态的变化。

针对多选组件的解决代码 #

<script>
export let items = [];
// 初始化selection，长度匹配初始items
let selection = new Array(items.length).fill(false);

// 当items变化时，增量更新selection，保留已有选中状态
$: {
  const updatedSelection = [...selection];
  
  // 新增项：补全到items长度，新增项默认未选中
  while (updatedSelection.length < items.length) {
    updatedSelection.push(false);
  }
  // 移除项：截断到items长度，丢弃超出部分的状态
  while (updatedSelection.length > items.length) {
    updatedSelection.pop();
  }
  
  selection = updatedSelection;
}

function selectAll() {
  // 直接生成新数组触发响应式更新
  selection = items.map(() => true);
}

function toggleSelection(index) {
  const newSelection = [...selection];
  newSelection[index] = !newSelection[index];
  selection = newSelection;
}
</script>

<div>
  <button on:click={selectAll}>全选</button>
  {#each items as item, idx}
    <label>
      <input 
        type="checkbox" 
        checked={selection[idx]} 
        on:change={() => toggleSelection(idx)} 
      />
      {item}
    </label>
  {/each}
</div>

解决思路 #

1. 避免无条件覆盖：不再在响应式块中直接创建全新的selection数组，而是基于现有状态做增量调整
2. 同步props变化：仅在items长度变化时，新增或删除selection的元素，保留用户已选择的状态
3. 正确触发响应式：修改数组时要创建新数组（或重新赋值），确保Svelte能检测到状态变化

通用场景扩展（如数字编辑字段） #

对于单个值的编辑场景，比如自动格式化的数字输入框，可以通过标记是否已修改来控制是否同步props：

<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

export let initialValue = 0;
let value = initialValue;
let isModified = false;

// 仅在props变化且用户未修改过时同步
$: if (!isModified) {
  value = initialValue;
}

function handleInput(e) {
  isModified = true;
  // 自动格式化逻辑：保留两位小数
  value = parseFloat(e.target.value) || 0;
  value = Math.round(value * 100) / 100;
}

function save() {
  dispatch('save', value);
  // 可选：重置标记，允许后续props更新再次同步
  isModified = false;
}
</script>

<input type="number" step="0.01" value={value} on:input={handleInput} />
<button on:click={save}>保存</button>

内容的提问来源于stack exchange，提问作者Jack Christensen