Svelte是否内置组件卸载后异步更新响应式变量的防护机制？

App组件的视图切换逻辑 #

// script
let view = 'products';

// markup
<sidebar/>
<view-container>
   {#if view === 'products'}
     <products />
   {:else if view === 'orders'}
     <orders />
   {/if}
<view-container>

Products组件的数据请求逻辑 #

// script
let data = [];
fetch(url).then(res => res.json()).then(json => {
  data = json; // 假设返回的json是数组格式
})

// markup
{#each data as entry (entry.id)}
  <product-card product_info={entry} />
{/each}

核心疑问 #

快速切换视图后，若fetch请求返回时products组件已经被卸载，此时对响应式变量data的赋值操作，Svelte会如何处理？是无操作还是会报错？类似场景在React中会触发错误，我已知Svelte的onMount和onDestroy钩子，但未在文档中找到相关说明。

当products组件卸载后，fetch回调里对data的赋值不会触发任何错误，也不会产生任何实际操作。

Svelte的响应式系统绑定于组件实例，组件卸载时，其内部响应式变量关联的更新逻辑会被自动清理。此时对data的赋值只是修改了一个普通JavaScript变量，不会触发任何组件更新（因为组件实例已不存在），完全不会出现React中那种"无法更新已卸载组件"的警告或错误。

如果想要更严谨地避免不必要的资源消耗，可以用onDestroy钩子取消未完成的请求：

// products.svelte
import { onDestroy } from 'svelte';

let data = [];
const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .then(res => res.json())
  .then(json => {
    data = json;
  })
  .catch(err => {
    if (err.name !== 'AbortError') {
      // 处理请求被取消之外的错误
    }
  });

onDestroy(() => {
  controller.abort(); // 组件卸载时终止请求
});

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