Vue组件响应式更新需确保数据访问路径可追踪：避免解构reactive对象、数组直接索引赋值、动态新增未声明属性；props应字段级透传；模板中长链访问和函数调用须转为computed；合理拆分组件并设稳定key。
Vue.js 组件渲染与响应式更新要保持一致，关键在于让模板中读取的数据路径始终可被响应式系统追踪，同时确保组件接收的 props 和内部状态变更能精准触发对应范围的重渲染。
响应式访问必须走原始引用路径
响应式依赖收集只在 getter 被实际调用时发生。一旦破坏访问链，就会丢失响应或引发意外更新：
- 不要解构 reactive 对象后使用：const { name } = user → {{ name }} 不响应；应统一用 {{ user.name }}
- 避免数组索引直接赋值：list[0] = newItem 不触发更新；改用 list.splice(0, 1, newItem) 或用 ref 包裹单项
- 新增属性需初始化声明：user.newField = 'x'（user 是 reactive）无效；应在 reactive 初始化时定义完整结构，或用 reactive({ ...user, newField: 'x' })
Props 传递要按需、浅层、显式
父组件传入的 props 是子组件响应式更新的源头之一。传得越宽，更新越泛：
- 禁用全对象透传：
→ user 任意字段变，子组件全量重渲染 - 推荐字段级透传：
，配合 defineProps 显式声明接收项 - 避免模板中长链可空访问：{{ user?.profile?.settings?.theme }} → 提取为 const theme = computed(() => user.profile?.settings?.theme ?? 'light')
模板中计算逻辑要收敛到 computed
每次渲染都执行函数会浪费性能，且无法被 Vue 缓存和依赖追踪：
立即学习“前端免费学习笔记（深入）”；
- 不用 {{ formatTime(item.time) }} → 改为 const displayTime = computed(() => formatTime(item.time))，再用 {{ displayTime }}
- 复杂派生状态（如过滤、排序结果）也应封装进 computed，确保只在依赖变化时重新计算
- Vue 3.2+ 可结合 v-memo 控制片段更新条件，例如 {{ item.title }}
组件拆分是天然的更新隔离手段
把高频变动或关注点独立的部分抽成子组件，能有效缩小响应影响范围：
- 列表项建议单独封装为
，单个 item 更新只触发该项重渲染 - v-for 必须设稳定 key（禁用 index），且 key 应来自数据本身（如 item.id）
- 头像状态、在线徽标等局部状态，建议用独立子组件接收 isOnline 这类布尔值 props，避免牵连整个用户卡片
