Svelte点击按钮调用onMount时报Function called outside component initialization错误如何解决？

错误原因 #

onMount 是 Svelte 专属的生命周期钩子，仅允许在组件初始化阶段（即组件 script 顶层同步执行上下文）调用，组件初始化完成后（比如点击事件的回调执行阶段）再主动调用 onMount 就会触发你遇到的报错。

核心实现思路 #

你不需要尝试重复调用 onMount 本身，只需要把原本写在 onMount 回调里的业务逻辑抽成独立的公共函数即可：

<script>
  import { onMount } from 'svelte'

  // 把原本写在onMount里的所有业务逻辑抽成独立函数
  const initLogic = async () => {
    // 此处放置你原本写在onMount回调里的代码，比如请求数据、初始化状态等
    console.log('执行初始化逻辑')
  }

  // 组件挂载时自动执行一次
  onMount(initLogic)

  // 点击按钮时直接调用抽离的公共函数
  const handleClick = () => {
    initLogic()
  }
</script>

<button on:click={handleClick}>重新执行初始化逻辑</button>

带清理逻辑的场景适配 #

如果你的初始化逻辑包含定时器、事件监听这类需要销毁的内容，对应把清理逻辑也单独抽离，每次执行新初始化前先调用清理函数避免内存泄漏：

<script>
  import { onMount, onDestroy } from 'svelte'

  let prevCleanup = null

  const initLogic = () => {
    // 示例：添加需要清理的定时器
    const timer = setInterval(() => console.log('逻辑运行中'), 1000)
    // 返回当前初始化逻辑对应的清理函数
    return () => clearInterval(timer)
  }

  const runInit = () => {
    // 先清理上一次初始化产生的副作用
    if (prevCleanup) prevCleanup()
    prevCleanup = initLogic()
  }

  onMount(runInit)
  // 组件销毁时执行最后一次清理
  onDestroy(() => prevCleanup?.())

  const handleClick = runInit
</script>

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