Svelte组件中`on:click={onDelete()}`事件处理器为何能生效？

组件与页面代码 #

Form.svelte组件 #

<script>
   export let onDelete;
</script>
<form>
  <button type="submit">Update</button>
  <button on:click={onDelete()}>Delete</button>
</form>

使用该组件的页面 #

<script>
  import Form from './Form.svelte';

  function onDelete() {
    console.log('deleted');
  }
</script>
<Form {onDelete} />

官方推荐的事件处理器写法 #

根据Svelte官方文档，正确的事件处理器绑定方式有两种：

1. 直接绑定函数引用：

<button on:click={onDelete}>Delete</button>

2. 使用箭头函数包裹（适合需要传递参数的场景）：

<button on:click={() => onDelete()}>Delete</button>

问题解析 #

首先要明确：on:click={onDelete()}这种写法并不是真正符合预期的“正常工作”，它的运行逻辑和预期存在偏差：

• 当组件初始化（挂载）时，Svelte会立即执行onDelete()这个函数调用，所以页面加载时就会打印一次deleted——这不是点击按钮触发的效果。
• 点击按钮时，因为onDelete()的返回值是undefined（原函数仅执行console.log，没有返回值），所以实际上没有任何点击事件的处理逻辑被触发。

之所以会出现“看似正常工作”的错觉，是因为用户把组件初始化时的console.log输出当成了点击按钮触发的结果。

Svelte的事件绑定逻辑是：on:click={expression}中的expression会在组件渲染时被计算，其结果会被作为事件处理函数。如果expression是一个函数调用（比如onDelete()），就会立即执行该调用，而非在点击时执行。

而官方推荐的两种写法，都是将函数本身（或包裹函数的箭头函数）作为事件处理器，确保只有在点击按钮时才会执行目标函数。

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