组件Props变更时如何获取数据？异步代码无法运行排查

你写的代码里，Svelte的反应式标记$:后面跟着的是一个异步箭头函数的定义，并没有实际调用这个函数。每次params变更时，只会重新创建这个匿名函数，不会执行里面的API请求逻辑。另外data没声明会变成全局变量，也是个潜在问题。

写法1：立即执行异步函数 #

把异步函数定义后马上调用，这样params一变就会触发API请求：

<script>
    export let params;
    let data; // 声明变量存储数据

    $: (async () => {
      data = await api.getData(params);
    })();
</script>

写法2：抽成单独函数再调用 #

可读性更好的写法，先定义异步函数，再在反应式语句里调用：

<script>
    export let params;
    let data;

    async function fetchData() {
      data = await api.getData(params);
    }

    $: fetchData(); // params变更时自动执行
</script>

别忘了处理API错误，避免未捕获异常：

$: (async () => {
  try {
    data = await api.getData(params);
  } catch (err) {
    console.error('数据请求失败:', err);
    // 这里可以添加错误提示的UI逻辑
  }
})();

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