vue组件数据更新但页面不重绘，本质是响应式系统未感知变化：对象新增属性需用$set或reactive；数组索引赋值需用$set或splice；异步操作需nexttick；组件复用需key或watch重置状态。
Vue 组件数据更新了但页面没重绘，本质是响应式系统没“感知”到变化。不是数据没改，而是 Vue 没触发视图更新——常见于对象新增属性、数组索引赋值、异步更新时机错位、深层嵌套或组件复用导致的缓存问题。
对象新增属性未响应
直接给已有响应式对象添加新字段（如 this.obj.newField = 'value'），Vue 2/3 均无法侦测，视图不更新。
- ✅ 正确做法：用 this.$set(this.obj, 'newField', 'value')（Vue 2）或 Vue.set()
- ✅ Vue 3 中推荐用 reactive 包裹整个对象，或用 ref + .value 赋值；若需动态加字段，改用 Proxy 可代理的结构（如 Map）或先定义好所有可能字段
- ⚠️ 避免写法：this.obj = {...this.obj, newField: 'value'} —— 若原对象非响应式引用，仍可能失效
数组通过索引直接赋值失效
写 this.list[0] = newItem 不会触发更新，因为 Vue 重写了数组方法（push/pop等），但未拦截索引访问。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 替代方案一：用 this.$set(this.list, 0, newItem)
- ✅ 替代方案二：用数组变异方法，如 this.list.splice(0, 1, newItem)
- ✅ Vue 3 中可配合 ref 使用 list.value[0] = newItem，但前提是 list 是 ref 且初始为响应式数组
异步更新未等待 DOM 就操作
数据变了，立刻查 DOM 或调第三方插件（如日历、图表），常拿到旧节点或报错——因 Vue 把 DOM 更新放入微任务队列，尚未执行。
- ✅ 用 this.$nextTick(() => { /* 操作新DOM */ })（Vue 2）或 await nextTick()（Vue 3）确保在更新后执行
- ✅ 典型场景：日期联动（A选后自动设B为+3个月），必须等 B 的 input 值渲染完成再 focus 或触发校验
- ✅ 若涉及 v-if 控制显隐，也可配合 v-if="showComponent" + 数据加载完再设 showComponent = true 强制重渲染
组件复用导致状态残留
使用 keep-alive 或路由复用同一组件时，props/data 变了但 template 未刷新（尤其含 v-model 的表单控件）。
- ✅ 监听关键 prop 变化，用 watch 手动重置内部状态（如清空表单、重置 isShow 标志）
- ✅ 给需要刷新的子组件加 :key="uniqueKey"，比如 :key="route.fullPath" 或 :key="JSON.stringify(propsData)"，强制重建实例
- ✅ 对日期联动类场景，可设一个 refreshFlag，点击时 toggle 它，配合 v-if="refreshFlag" 让组件重新挂载
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
