计算属性不更新是因为其依赖的数据非响应式。常见原因包括：动态添加对象属性未用$set、替换对象时新对象未响应式、依赖外部非响应式变量等，需确保所有依赖均被vue代理。
计算属性不更新？先确认它是否真“依赖”了响应式数据
Vue 的计算属性（computed）只会在其响应式依赖发生变更时重新求值。如果依赖的是普通对象属性、未被 Vue 代理的变量、或通过非响应式方式修改的数据（比如直接赋值给未定义的属性、用 Object.assign 替换整个对象但没触发 setter），计算属性就“感知不到变化”，自然不会更新。
常见非响应式依赖场景及排查方法
1. 直接修改未声明的响应式属性
Vue 无法侦测对象上新增/删除的属性（尤其在 data 初始化后动态添加）。例如：
-
this.obj.newProp = 'value'—— 不会触发更新，newProp不是响应式 - ✅ 正确做法：
this.$set(this.obj, 'newProp', 'value')或使用Vue.set()（Vue 2）；Vue 3 中应使用reactive()包裹，或确保初始就定义好字段
2. 用普通对象或字面量替代响应式对象
比如在 methods 中写了 this.list = [{...}, {...}]，但 list 原本是响应式数组，这种赋值本身没问题——但若新数组里包含未经过响应式处理的对象，则深层依赖失效：
- ❌
this.list = listData.map(item => ({ ...item }))→ 新对象无 getter/setter - ✅ 改为
this.list = listData.map(item => ({ ...item, __v_isRef: false }))没用；正确是确保原始数据已响应式，或用ref()/reactive()显式包装
3. 依赖了外部变量、闭包变量或 this 指向错误的函数
计算属性函数内部若引用了非 data / props / store 中的变量（如模块顶层 const、定时器回调里的临时变量），这些不会被 Vue 追踪：
- ❌
const now = Date.now(); computed: { myTime() { return now; } }→now是常量，永远不变 - ✅ 应把依赖收归到响应式上下文中，比如
data() { return { timestamp: Date.now() } }，再在 computed 中用this.timestamp
快速验证：你的依赖是否真的响应式？
打开浏览器控制台，在组件实例上运行：
-
console.log(this.$data)→ 查看目标属性是否出现在响应式对象中（Vue 2） - Vue 3 组合式 API 中，检查
ref是否被unref()错误解包，或reactive对象是否被toRaw()脱离响应式 - 用
Vue Devtools查看该组件的 Reactivity 面板，确认计算属性列出的 dependencies 是否都带“响应式图标”（小圆点或箭头） - 手动触发一次依赖变更（如点击按钮修改某个字段），观察对应计算属性的 getter 是否被执行（可在函数开头加
console.log('recomputed')）
补充提醒：异步与缓存机制也会影响“感知”
计算属性有缓存特性，只要依赖没变，多次访问不会重复执行 getter。这有时会被误认为“没更新”：
- ✅ 是正常行为，不是 bug；如需强制刷新，可改用
method（无缓存）或在依赖中加入时间戳等“伪变动” - ⚠️ 注意：
async computed并不存在！不要在 computed 中 await —— 它必须同步返回值；异步逻辑请用watch+ref或useAsync类组合式函数
