生产环境中Svelte的onMount()是否保证只会被调用一次？

结论 #

你观察到的onMount()重复触发现象仅存在于Svelte REPL环境，生产构建版本不存在该问题。

原因说明 #

• REPL为了实现修改代码后实时预览的热更新能力，每次修改代码保存后，会自动销毁当前页面中挂载的旧组件实例，再重新初始化并挂载修改后的新组件实例。
• 每个组件实例挂载时都会自然触发一次onMount()，旧实例挂载时添加的脚本不会被REPL自动清理，新实例挂载时又会执行一次添加脚本的逻辑，叠加后就出现了DOM中存在多份相同src脚本的现象。

生产环境表现 #

生产环境没有热更新逻辑，每个组件实例只会在首次挂载到DOM时触发一次onMount()。只要组件实例没有被主动销毁重建（比如路由切换、条件渲染触发的组件销毁），onMount()就不会重复执行，也不会出现重复添加资源的问题。

如果你需要在REPL环境下也避免重复加载脚本，只需在添加脚本前增加一层判断，检测页面中是否已经存在相同src的脚本标签，存在则跳过添加逻辑即可。

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