Vue组件性能反模式包括：直接修改响应式数组索引或对象属性导致更新失效；子组件直接改props引发隐式耦合；滥用deep watch和$nextTick；未优化大型v-for列表渲染。
Vue 组件开发中，性能反模式往往不是语法错误，而是违背响应式原理、虚拟 DOM 机制或组件设计原则的写法——它们在小规模场景下可能“看起来正常”，但随着数据量增长或交互变复杂，会迅速暴露卡顿、内存泄漏、重复渲染等问题。
直接修改响应式数组索引或对象属性
这是 Vue 2 和 Vue 3 都需警惕的基础陷阱。虽然 Vue 3 的 Proxy 能拦截更多操作，但直接赋值 this.list[0] = newValue 或 this.obj.newKey = value 仍无法触发依赖收集与更新。
- 数组场景：改用
splice、push、pop等原生方法，或 Vue 3 中的ref([])+ 数组方法（自动响应） - 对象新增属性：避免
this.obj.xxx = yyy；应使用reactive({...obj, xxx: yyy})或Object.assign({}, obj, {xxx: yyy}) - 深层嵌套对象更新：若仅需局部响应，优先用
shallowRef存储整个对象，再手动触发更新
子组件直接修改 props（尤其是对象/数组类型）
Vue 不禁止修改传入的对象内部字段（如 props.user.name = 'Tom'），但这会绕过响应式系统追踪，且造成隐式父子耦合——父组件无法感知变更，DevTools 也无法记录，调试和维护成本陡增。
- 正确做法：子组件通过
$emit抛出事件，由父组件决定是否更新及如何更新 - 初始化后需本地维护的状态：用
ref(props.initialValue)或computed(() => {...})封装，切断与 props 的响应链 - 若必须双向同步（如表单控件），统一用
v-model+modelValueprop +update:modelValue事件，保持数据流向清晰
滥用深度监听与无节制的 $nextTick
watch 设置 deep: true 或频繁调用 $nextTick 是典型“用力过猛”。前者强制遍历整个嵌套结构，后者若包裹无关 DOM 操作，反而延迟真实更新时机。
立即学习“前端免费学习笔记（深入）”；
- watch 深度监听：仅当确实需要监听任意层级变化时启用；多数场景可改为监听具体字段（如
watch: { 'user.profile.name'() {...} }）或用计算属性 - $nextTick 使用：只在明确需要等待 DOM 渲染完成后再执行逻辑时才用（如获取元素尺寸、聚焦输入框）；避免包裹纯数据赋值或异步请求回调
- 替代方案：Vue 3 中优先使用
onMounted+nextTick组合，或直接依赖响应式更新，减少手动干预
不加限制的大型列表渲染与未优化的 v-for
渲染上千项的 v-for 列表却未做任何优化，是首屏卡顿最常见原因。虚拟滚动虽好，但很多场景只需更轻量的手段。
- 务必为
v-for添加唯一，且避免用 index作 key（尤其涉及插入/删除） - 长列表建议配合
virtual-scroller或vue-virtual-scroll-list，而非单纯分页 - 复杂模板中，将非响应式内容（如静态文本、计算结果）用
v-once或提取为计算属性缓存 - 避免在
v-for内部直接调用函数（如:title="getTitle(item)"），应预处理或用 computed 缓存
