Posts

Vue3键盘事件处理包含keydown（按下触发，长按连续触发）与keyup（松开触发，单次触发），前者适实时搜索等场景，后者用于提交表单。常用按键修饰符（如.enter、.tab）替代keyCode，组合快捷键（Ctrl+S、Shift+Enter）通过修饰符实现，代码简洁，可通过prevent等修饰符阻止默认行为，解决按键不生效、组合快捷键不触发等问题。

Vue3中事件处理函数传参，多用内联调用（如@click=“say(‘参数’)"）传递自定义参数。需原生事件时用$event或箭头函数（如@click=“warn(‘消息’, $event)“或(e)=>warn(‘消息’,e)），参数顺序需自定义在前、事件在后。可通过解构简化事件对象操作。

DOM事件流分捕获、目标、冒泡三阶段，Vue默认冒泡阶段触发事件。事件修饰符改变这一行为：.stop（阻止冒泡）、.prevent（阻止默认行为）、.capture（捕获阶段触发）、.passive（优化滚动性能）、.once（只触发一次）。修饰符可串联，如.click.stop.prevent。

Vue事件处理分内联和方法处理器。内联模板写简单逻辑（如count++），需事件对象显传$event，不可复用；方法藏逻辑到函数，适合复杂/复用场景，可传参和事件对象。核心区别：逻辑位置、复杂度、复用性。场景：内联简单切换，方法复杂/复用。

Vue事件绑定支持v-on与@简写，涵盖按钮点击、输入、表单提交等常用事件。处理函数分内联（简单逻辑）和方法（复用），可传自定义参数，需用$event获取原生事件。常见错误包括函数未定义、未传$event、修饰符拼写错误。

本文介绍Vue 3列表渲染整合搜索、排序、分页的实现。通过v-model双向绑定搜索词，computed依赖缓存过滤数据；用sortKey和sortOrder管理排序状态，复制数组避免篡改原始数据实现排序；计算当前页数据切片，渲染分页列表，并处理搜索、排序、分页联动。