Vue编译器将.stop和.prevent确定性地转译为event.stopPropagation()和event.preventDefault()调用，属于声明式编译而非运行时优化；修饰符连用时统一按prevent→stop顺序插入，保证语义可预测、无额外开销。
Vue 编译器不会“优化”.stop 和 .prevent 为更高效的操作，而是将它们**确定性地编译为标准的原生事件处理逻辑**——即在生成的事件监听函数中，固定插入 event.stopPropagation() 和 event.preventDefault() 调用。这不是运行时优化，而是模板到渲染函数的**声明式转译**。
.stop 的编译逻辑
当编译器遇到 @click.stop="handler" 时：
- 它识别出
.stop是事件传播控制修饰符； - 在生成的事件处理器函数中，**自动前置**
event.stopPropagation()； - 然后才调用用户定义的
handler（或执行内联表达式）； - 该行为与手写
e => { e.stopPropagation(); handler(e); }完全等价，无额外开销。
.prevent 的编译逻辑
对于 @submit.prevent="onSubmit" 或 @click.prevent：
- 编译器检测到
.prevent，确认需取消默认行为； - 在事件回调开头插入
event.preventDefault()； - 不改变后续逻辑执行顺序，也不影响冒泡（除非同时用了
.stop）； - 对表单 submit 事件，这直接替代了原生页面刷新，无需手动
return false。
连用时的编译顺序与语义
像 @click.stop.prevent 这类组合：
- 修饰符顺序在编译结果中**不依赖先后**，Vue 内部统一按
prevent→stop顺序插入调用； - 即最终生成：
e => { e.preventDefault(); e.stopPropagation(); handler(e); }； - 这种固定顺序兼顾可读性（先阻止跳转/提交，再切断传播）和行为确定性；
- 开发者无需关心底层调用次序，只需按业务意图书写修饰符即可。
不是运行时优化，而是编译期确定性转译
需要明确的是：
- Vue 编译器不做条件判断或路径剪枝——
.stop总是插入stopPropagation，哪怕父元素没绑定事件； - 它不分析 DOM 结构或事件委托关系，也不做“是否真有必要”的推断；
- 这种设计保证了模板语义的**完全可预测性**：所写即所得，没有隐藏逻辑；
- 真正的性能优化由浏览器原生事件机制保障，Vue 只负责精准传递意图。
