基础入门

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

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

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

大规模列表用v-for渲染时，过多DOM节点致页面初始化慢、滚动卡顿等性能问题。优化方案：虚拟滚动（如vue-virtual-scroller的RecycleScroller）通过计算可视区域项数，仅渲染少量DOM（如item-size设50px，10000条数据仅渲染10条）；v-memo缓存模板片段，依赖数组参数控制是否更新，结合v-for减少重复渲染。

Vue3数据绑定依赖响应式系统，通过插值、v-bind实现双向绑定，基于Proxy代理监听数据变化。列表渲染用v-for遍历数组/对象，key优化性能。实战结合Axios与onMounted获取后端数据并渲染，处理加载状态；进阶含数组方法动态更新及性能优化。

Vue3中v-if与v-for同元素时v-if优先级更高，导致v-if无法访问v-for循环变量，引发错误。最佳实践是用计算属性先过滤数据，再通过v-for循环渲染过滤结果，计算属性可缓存结果、优化性能并使逻辑更清晰。