Svelte中addItem函数内二次调用onMount的原因与实现问询

核心原因：动态内容的挂载时机需求 #

你之前的认知存在小偏差：onMount 并非仅在父组件初始化阶段执行一次，而是每个组件实例（包括动态创建的子组件/片段）完成挂载后，都会执行其对应的onMount回调。

在Canvas.svelte的场景中，addItem函数的作用应该是动态向画布添加新的可交互元素/子组件——这些元素不是组件初始化时就存在于DOM中的，而是后续通过用户操作（比如点击添加）生成的。此时需要在这些动态元素挂载到DOM后，执行一些依赖DOM的逻辑（比如获取元素尺寸、初始化绘制上下文、绑定事件监听等），所以在addItem内部调用onMount，就是为了绑定这个动态内容的挂载回调。

实现逻辑拆解 #

• 组件初始化时，父组件的onMount执行，完成画布本身的基础初始化（比如获取canvas元素、设置基础尺寸）。
• 调用addItem时，会创建一个新的子组件实例（或DOM片段），并在这个新实例的逻辑中调用onMount。
• Svelte会追踪这个新组件的生命周期，当它被插入到DOM中完成挂载后，就会执行这个onMount里的回调，完成该元素的初始化（比如绘制图形、绑定拖拽事件）。
• 每次调用addItem都会生成新的组件实例，对应的onMount也会在各自实例挂载时触发，互不干扰。

简单来说，这里的onMount不属于父组件的生命周期，而是属于addItem创建的每个动态子元素的生命周期，所以能在每次添加时执行。

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