petite-vue嵌套v-if下多余mount/unmount事件的技术问询

核心问题分析 #

• 目前通过判断el.isConnected是否为true过滤无效事件的方案可行，但频繁修改模型状态时需注意：虽然单次DOM连接检查开销极低，但高频场景下可考虑批量处理或防抖优化，避免不必要的重复判断。

场景疑问解答 #

1. 点击编辑后取消，v-for循环项触发两次unmount的原因 #

• 点击编辑时，v-for循环项被替换为编辑界面DOM，原列表项触发第一次unmount；取消编辑时，编辑界面DOM被移除，同时虚拟DOM对比过程中，会对临时编辑组件触发第二次unmount。本质是petite-vue的diff算法在切换DOM片段时，针对新旧节点分别触发了卸载逻辑，两次unmount的目标分别是原列表项和编辑界面DOM。

2. 点击编辑、保存后再确认，'Edit Screen'触发isConnected=false的mount事件的原因 #

• 保存后确认的流程中，编辑界面DOM还未完成插入文档流时，petite-vue就触发了mount事件，此时el.isConnected自然为false。这是框架内部事件触发时机与DOM挂载的异步差异导致的——框架先完成组件实例创建并触发mount钩子，再执行DOM插入操作，所以会出现mount事件触发时DOM未连接的情况。

3. 重复编辑-取消或编辑-保存-确认循环时的异常事件问题 #

• 多次循环操作后，petite-vue的组件实例缓存、DOM节点复用逻辑出现偏差：已卸载的组件实例未被彻底清理，或复用了错误的DOM节点，进而触发多余的mount/unmount事件。作为轻量框架，petite-vue在复杂DOM切换场景下的实例回收机制不如Vue Core完善，容易出现这类残留事件触发的问题。

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