Vue3 事件与原生事件的关系和冒泡机制差异分析

#vue3

目录

• 1. 总结
• 2. Vue3 中 @click 和 :onClick 的区别和执行顺序
  • 2.1. 语法差异
  • 2.2. 执行顺序
  • 2.3. 使用场景区别
  • 2.4. 事件修饰符支持
  • 2.5. 最佳实践建议
  • 2.6. 注意事项
  • 2.7. 建议

1. 总结

• Vue3 的事件系统是==建立在原生 DOM 事件系统之上的==
  • vue3 事件就是对原生事件的封装而已
  • Vue3 不会覆盖原生事件
• @click 和 :onClick ，都会执行，@onClick 优先级更高？
  • @click 会有额外的处理==？==
• 自定义事件不会冒泡，多个会覆盖

Vue3 的事件系统是==建立在原生 DOM 事件系统之上的==，它保持了原生事件的冒泡机制，同时提供了更便捷的事件处理方式和自定义事件系统

• @click 等保持原生事件的特性
• 自定义事件，比如 @custom-event 不会冒泡，和原生事件不太一样

2. Vue3 中 @click 和 :onClick 的区别和执行顺序

AI 的回答，也不一定，最好自己试一下

2.1. 语法差异

• @click 是 v-on:click 的简写，是 Vue 特有的事件处理语法
• :onClick 是通过 v-bind 绑定原生 DOM 的 onclick 事件处理器

2.2. 执行顺序

1. :onClick (原生事件) 会先被触发
2. @click (Vue 事件) 随后执行

-Vue 在内部==做了额外的处理==，所以会在原生事件之后触发

2.3. 使用场景区别

• @click 是 Vue 推荐的事件处理方式，可以直接在模板中使用，支持事件修饰符
• :onClick 更接近原生 DOM 事件，通常在需要直接操作原生 DOM 事件时使用

2.4. 事件修饰符支持

• @click 支持 Vue 的所有事件修饰符，如 .stop、.prevent、.exact 等
• :onClick 作为属性绑定，不支持 Vue 的事件修饰符，需要在处理函数中手动处理

2.5. 最佳实践建议

• 在 Vue 应用中优先使用 @click，这样可以更好地利用 Vue 的事件系统
• 如果同时使用两种方式，要注意执行顺序可能带来的影响
• 需要使用事件修饰符时，应该使用 @click

2.6. 注意事项

• 在同一个元素上同时使用这两种方式可能会导致重复触发
• 如果需要阻止事件冒泡或默认行为，使用 @click 搭配事件修饰符会更加方便

2.7. 建议

• 这种执行顺序的设计是由于浏览器的事件处理机制决定的，原生事件总是先于框架的事件处理系统执行。
• 在实际开发中，建议选择其中一种方式而不是混用，以避免潜在的问题。