Dynamic Event Listeners — lwc:on Considerations

好，同学们，我们这一页来看一个非常重要的细节，就是 `lwc:on` 这个指令在处理事件监听器时的变异规则。记住一句话就行：，永远不要直接去修改你传给 `lwc:on` 的那个对象，而是要用一个全新的对象来替换它。， 我知道你可能会想：“不就一个对象嘛，我改一下里面的属性，性能不是更好吗？” 但在 LWC 里，这样是不行的。因为框架在底层专门对 `lwc:on` 做了优化，它会去比较旧对象和新对象之间的差异。你想想看，如果你在原对象上直接增删属性，框架就分不清哪些监听器该注册、哪些该注销了。所以你每次想让事件配置发生变化时，都重新创建一个新对象赋值过去。 那框架具体是怎么处理的呢？它会对比新旧两个对象。旧对象里有、但新对象里没有的属性，框架就认为这个事件监听被删除了，它会帮你自动取消注册；新对象里多出来的属性，它就会当成新增的监听器注册上去；至于两个对象里都有的属性，它就认为这个监听器需要更新，可能是回调函数变了或者配置变了。这样一来，整个过程就是，可预测且安全，的。 我还想提醒一点，在 LWC 中，当你需要动态地往一个子组件上传递事件处理程序时，我们推荐你用 `lwc:on`，而不是用 `lwc:spread` 去拍散事件。`lwc:on` 是专门为这个场景设计的，用起来更清晰，性能也更好。 不过呢，有两个冲突的规则要特别注意一下。如果你在同一个 HTML 元素上，既用了 `lwc:on` 又用了 `on` 开头的属性来声明同样的事件类型，框架会直接报错，它不知道该听谁的。但如果你把这个 `on` 开头的属性换成 `lwc:spread`，反而不冲突了，结果那两个监听器都会被加上去。也就是说 `lwc:on` 和 `lwc:spread` 可以在相同事件类型上共存，但 `lwc:on` 和直接写的 `on...` 属性是不共存的。 最后，当你在创建动态组件的时候，经常会用到三个指令配合使用：`lwc:component` 加上 `lwc:is` 来指定要渲染哪个组件，`lwc:spread` 把所有属性拍进去，而 `lwc:on` 专门负责传入事件处理函数。这三个加在一起，你就拥有了在运行时灵活配置动态组件所有行为的能力。 所以这一页的重点就是，记住：，传给 `lwc:on` 的对象，永远更新时用新对象替换，而不是在原对象上动手脚，。这能帮你避免很多莫名其妙的 bug。好了，以上就是这节课关于 `lwc:on` 变异规则的内容。