Svelte派生存储未在组件销毁前取消订阅的问题排查

我有一个包含派生存储（derived store）的子组件，这个派生存储接收一个存数组的store作为输入，返回数组长度。但它只能处理数组，输入为null时会抛出错误。

为避免报错，我在父组件里用if块包裹子组件，检查$x是否为数组，但点击按钮把x设为null时，子组件内的派生存储总是在if块移除组件前就重新运行，导致报错。

请问Svelte处理if块和派生存储的顺序是怎样的？如何确保父组件先移除该组件，再让组件内的派生存储再次运行？

父组件代码 #

<script>
    import {writable} from 'svelte/store'
    import Component from './Component.svelte'

    const x = writable([1,2,3,4])

    function changeToNull() {
        x.set(null)
    }
</script>

<!-- 当x的值被设为null时，组件在内部派生存储重新运行前并未被销毁 -->
{#if Array.isArray($x)}
    <Component value={x} />
{/if}

<button on:click={changeToNull}>Click</button>

子组件代码 #

<script>
    import {derived} from 'svelte/store'
    export let value;

    // 计算数组长度的派生存储
    const d = derived(value, _value => {
        return(_value.length)
    })
</script>

{$d}

执行顺序说明 #

Svelte的响应式更新流程是：当store值变化时，首先会通知所有依赖该store的派生存储和组件订阅者更新，之后才会处理组件的条件渲染（比如{#if}块的销毁/创建）。所以当x从数组变为null时，子组件的派生存储会先响应value的变化尝试计算长度，此时_value是null，访问length就会报错，之后才会执行父组件的if判断，销毁子组件。

解决方案 #

有几种实用方式可以解决这个问题：

• 在派生存储内部做空值检查
  直接在派生存储的回调里判断输入是否为数组，避免访问不存在的length属性：

  const d = derived(value, _value => {
      return Array.isArray(_value) ? _value.length : 0; // 也可返回null或其他符合业务的默认值
  })
  

• 在父组件传递派生后的安全值
  不在子组件里处理原始store，而是在父组件先派生一个确保是数组的store，再传给子组件：

  // 父组件script中
  import {derived} from 'svelte/store';
  const safeX = derived(x, val => Array.isArray(val) ? val : []);
  
  // 父组件模板中
  <Component value={safeX} />
  

  这样子组件可以直接处理安全的数组，无需额外判断。

• 传递当前值而非store
  如果子组件不需要订阅store的后续变化，也可以直接传递$x的值（而非store本身），这样当if块不满足时，子组件直接被销毁，不会收到null值：

  <!-- 父组件模板 -->
  {#if Array.isArray($x)}
      <Component value={$x} />
  {/if}
  
  <!-- 子组件script -->
  export let value;
  <!-- 直接使用value.length，无需派生存储 -->
  {value.length}
  

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