Svelte 子组件修改列表属性后父组件响应式列表不同步更新的问题

问题根因 #

同步失效的核心是对Svelte的响应式触发机制理解有偏差：
Svelte 3 不会深度追踪嵌套对象、数组的内部属性修改，只有当被追踪的顶层变量发生明确的赋值动作时，编译器才会关联触发所有依赖这个变量的DOM重新渲染。

示例代码里，虽然父子组件传递的是数组的引用，子组件修改customer.name时确实改写了内存中的对象本身，但整个customers数组的顶层引用从始至终没有发生任何变化，父组件侧的Svelte编译器收不到需要重新渲染的信号，自然不会同步更新页面上的列表内容。

可行的修复方案 #

方案1：遵循单向数据流，通过事件通知父组件更新（推荐） #

这是Svelte官方推荐的写法，逻辑清晰可维护，不会埋下响应式失效的隐患：

• 改造子组件Nested.svelte：不再直接绑定修改对象属性，改为监听输入事件，把修改的参数通过自定义事件派发回父组件

  <script>
      import { createEventDispatcher } from 'svelte';
      export let customers;
      const dispatch = createEventDispatcher();
  
      function handleNameInput(customerId, event) {
          dispatch('name-update', {
              id: customerId,
              newName: event.target.value
          })
      }
  </script>
  
  {#each customers as customer (customer.id)}
      <p>
          <input 
              value={customer.name}
              on:input={(e) => handleNameInput(customer.id, e)}
          />
      </p>
  {/each}
  

• 改造父组件App.svelte：监听子组件派发的更新事件，重新生成新的数组引用完成赋值，触发响应式

  <script>
      import Nested from './Nested.svelte';
      let customers=[{
          id:1,
          name: "Smith"
      },{
          id:2,
          name: "Foo"
      },{
          id:3,
          name: "Bar"
      }]
  
      function updateCustomerName(event) {
          const { id, newName } = event.detail;
          // 生成全新的数组引用，明确触发响应式更新
          customers = customers.map(item => 
              item.id === id ? {...item, name: newName} : item
          )
      }
  </script>
  
  {#each customers as customer (customer.id)}
      <p>{customer.name}</p>
  {/each}
  
  <Nested 
      {customers} 
      on:name-update={updateCustomerName} 
  />
  

方案2：双向绑定透传数组，手动触发响应式（适合快速开发） #

如果需要减少模板代码量，可以给数组增加双向绑定通道，在输入修改时手动触发顶层变量的赋值动作，让Svelte捕获到更新信号：

• 父组件传参时把普通传值改成双向绑定

  <Nested bind:customers={customers} />
  

• 子组件的输入框绑定值时，补一个输入完成后的数组赋值触发

  <script>
      export let customers;
  </script>
  
  {#each customers as customer (customer.id)}
      <p>
          <input 
              bind:value={customer.name}
              on:input={() => customers = customers}
          />
      </p>
  {/each}
  

注意：这种写法虽然能快速实现同步效果，但破坏了单向数据流的约定，适合写demo或临时原型，正式生产环境不建议使用。

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