如何在{#if}块内的div渲染完成后调用函数？

针对你给出的Svelte代码片段，要在div渲染完成后调用指定函数，有两种常用方案：

方案一：直接在div上使用on:mount指令 #

on:mount会在元素挂载到DOM后触发，刚好匹配需求——只有当val为真时这个div才会被渲染，挂载时直接调用目标函数即可：

{#if val}
  <div on:mount={() => yourTargetFunction()}>Content</div>
{/if}

方案二：结合响应式语句与元素引用 #

如果函数逻辑需要和组件其他状态联动，可以通过绑定元素引用，配合响应式语句判断执行时机：

<script>
  let val = false;
  let divElement;

  function yourTargetFunction() {
    // 这里写你的函数逻辑
  }

  $: if (val && divElement) {
    yourTargetFunction();
  }
</script>

{#if val}
  <div bind:this={divElement}>Content</div>
{/if}

当val变为真且div已挂载到DOM（divElement存在）时，响应式语句会自动触发目标函数。

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