Vue3里computed为啥不更新？这些坑你踩过吗？

terry 2小时前阅读数 14 #SEO

文章标签 Vue3 computed

不少刚上手Vue3的同学,都会碰到这么个情况：明明感觉数据改了，computed计算出来的结果却纹丝不动，这事儿说起来，和Vue3的响应式原理、computed本身的设计逻辑脱不了干系，今天咱们就把常见的“不更新”场景拆开来，一个个说清楚原因和解决办法。

先搞懂Vue3 computed的“依赖追踪”逻辑

Vue3的computed能自动更新,靠的是响应式依赖收集，简单说，computed的getter函数里用到哪些响应式数据（比如ref或reactive包装的变量），Vue就会把这些数据当成“依赖”记下来，等这些依赖发生变化时，Vue就会触发computed重新计算，更新结果。

要是computed不更新,本质上是依赖没被正确追踪，或者依赖变化时Vue没感知到，接下来看具体哪些操作会让computed“摆烂”。

这些场景会让computed“躺平”不更新

依赖的根本不是“响应式数据”

很多同学刚开始写代码,容易犯这个错：把普通变量当成响应式数据用，比如这样写：

<script setup>
let normalNum = 1; // 普通变量，非响应式
const computedNum = computed(() => normalNum * 2);
function add() {
  normalNum++; // 改了普通变量，Vue压根不知道
}
</script>

点击add按钮后，computedNum肯定不会变——因为Vue的响应式系统只盯着ref或reactive包装的数据，普通变量变了，Vue感知不到，自然不会触发computed重新计算。

解决方法：把普通变量改成响应式，用ref包一层就行：

<script setup>
const normalNum = ref(1); // ref让数据变成响应式
const computedNum = computed(() => normalNum.value * 2);
function add() {
  normalNum.value++; // 修改ref的value，Vue能感知到
}
</script>

getter里掺了“副作用”操作

computed的getter函数,设计上应该是纯函数——只负责计算，不能搞异步、修改其他响应式数据这些“副作用”操作，不然依赖追踪会乱套，看个反面例子：

<script setup>
const count = ref(0);
const computedCount = computed(() => {
  // getter里搞了异步+修改数据，逻辑爆炸
  setTimeout(() => {
    count.value++; 
  }, 1000);
  return count.value * 2;
});
</script>

这时候computedCount的更新要么没反应，要么疯了一样重复触发，为啥？因为Vue在收集依赖时，getter的执行时机和这些副作用操作（比如异步、改数据）冲突了，导致依赖追踪失效。

解决方法：把副作用逻辑单独拎出来，放到method或watch里，比如异步操作、修改数据这些事儿，别往getter里塞：

<script setup>
const count = ref(0);
const computedCount = computed(() => count.value * 2);
// 副作用逻辑单独写个函数
function asyncAdd() {
  setTimeout(() => {
    count.value++;
  }, 1000);
}
</script>

误解了computed的“缓存”机制

Vue3的computed默认是带缓存的——只有依赖的响应式数据变了，才会重新计算，要是依赖一直没变，哪怕你多次访问computed，结果也是从缓存里拿的，有些同学误以为“每次用computed都会重新算”，就会觉得“怎么不更新”。

看个例子：

<script setup>
const fixedData = ref(10); // 永远不变的响应式数据
const computedFixed = computed(() => fixedData.value + 5);
// 这里computedFixed永远是15，因为fixedData没变化
</script>

这时候computed不更新是正常的,因为依赖（fixedData）没变化，Vue为了性能直接用缓存，要是你业务里确实需要“每次访问都重新算”，那别用computed，改用method（方法每次调用都会执行），但如果是依赖真的没变化，那接受缓存结果就好。

踩了对象/数组的“响应式陷阱”

Vue3对对象和数组的响应式处理有特殊逻辑,要是操作不对，Vue感知不到数据变化，computed自然也不更新，典型场景有两个：

数组直接改索引：比如arr[0] = 10
对象直接新增属性：比如obj.age = 18

先看数组索引修改的例子：

<script setup>
const arr = ref([1, 2, 3]);
const computedSum = computed(() => arr.value.reduce((a, b) => a + b, 0));
function changeFirst() {
  arr.value[0] = 10; // 直接改索引，Vue感知不到
}
</script>

点击changeFirst后，computedSum还是原来的6（1+2+3），不会变成15（10+2+3），因为Vue对数组的响应式，只监听push、splice这些“变异方法”，直接改索引不触发更新。

再看对象新增属性的例子：

<script setup>
const obj = reactive({ name: '张三' });
const computedFull = computed(() => obj.name + (obj.age ? `, ${obj.age}岁` : ''));
function addAge() {
  obj.age = 18; // 新增属性，Vue感知不到
}
</script>

点击addAge后，computedFull还是“张三”，不会变成“张三, 18岁”，因为reactive包装的对象，只有初始化时存在的属性才有响应式能力，新增属性默认没有get/set，Vue监听不到。

解决方法：

数组操作：用Vue支持的变异方法（push、splice、pop等），或者直接替换整个数组，比如数组例子改成这样：

function changeFirst() {
  // 方法一：用splice替换元素
  arr.value.splice(0, 1, 10); 
  // 方法二：替换整个数组
  arr.value = [...arr.value.slice(1), 10];
}

对象操作：可以用toRefs提前把属性变成ref，或者手动给新增属性加响应式，比如对象例子改成这样：

// 方法一：用toRefs提前声明属性（适合已知属性）
const obj = reactive({ name: '张三', age: null }); 
const { age } = toRefs(obj); // age变成ref，修改时触发更新
function addAge() {
  age.value = 18;
}
// 方法二：手动给新增属性加响应式（适合动态属性）
import { defineProperty } from 'vue';
function addAge() {
  defineProperty(obj, 'age', {
    value: 18,
    writable: true,
    enumerable: true,
    configurable: true
  });
}