Vue3中computed不更新？多半是这几个暗坑在捣乱！

terry 1小时前阅读数 26 #SEO

文章标签 Vue3；computed

做Vue项目时，你是不是遇到过这种情况：明明改了数据，computed计算属性却纹丝不动？明明逻辑没错，页面就是不跟着变？别慌，这不是灵异事件，而是computed的“依赖追踪”机制在背后搞鬼，今天咱们就把Vue3 computed不更新的常见原因扒个干净，再逐个破解~

依赖数据不是响应式，computed“看”不到变化

Vue3的响应式是靠reactive ref这些API实现的，只有被它们“包装”后的数据，才能被Vue跟踪变化，要是computed依赖的是普通变量（比如let const声明的原始值），Vue根本不知道它变了，自然不会触发computed更新。

举个例子：

<script setup>
let normalCount = 0; // 普通变量，非响应式
const wrongComputed = computed(() => normalCount * 2);
function add() {
  normalCount++; // 这里改的是普通变量，Vue感知不到
}
</script>

点击add按钮后，normalCount确实变了，但wrongComputed完全没反应——因为普通变量没有“响应式能力”，computed的依赖收集系统根本没把它当回事。

怎么修？
把普通变量换成ref或reactive包装的响应式数据：

<script setup>
const count = ref(0); // ref包装，变成响应式
const rightComputed = computed(() => count.value * 2);
function add() {
  count.value++; // 改ref的value，Vue能感知到
}
</script>

响应式数据“解构”后丢失响应式，computed抓瞎

用reactive定义对象后，直接解构（比如const { xxx } = state）很容易踩坑——如果解构出来的是原始值（像数字、字符串），它们会变成普通变量，彻底丢失响应式，这时候computed依赖这些解构后的值，自然跟丢变化。

举个例子：

<script setup>
const state = reactive({ count: 0 });
const { count } = state; // 直接解构，count变成普通变量
const wrongComputed = computed(() => count * 2);
function add() {
  state.count++; // state.count确实变了，但解构的count还是旧值
}
</script>

点击add后，state.count从0变1，但count还是0，所以wrongComputed还是0×2=0，完全不更新。

怎么修？
用toRefs保持响应式（它会把reactive对象的每个属性转成ref）：

<script setup>
import { reactive, toRefs, computed } from 'vue';
const state = reactive({ count: 0 });
const { count } = toRefs(state); // count现在是ref对象
const rightComputed = computed(() => count.value * 2);
function add() {
  state.count++; // 或者count.value++，两种方式都能触发更新
}
</script>

数组/对象修改方式不触发响应式，computed没感知

Vue3对数组索引修改、对象新增/删除属性这类操作，默认不触发响应式（因为ES6 Proxy的拦截逻辑有局限性），如果computed依赖这些“非响应式修改”的结果，肯定更新不了。

子坑1：数组索引直接修改

数组用索引改值（比如arr[0] = 10），Vue监听不到变化，要是computed依赖这个数组的某个索引值，自然没反应。

举个例子：

<script setup>
const state = reactive({ list: [1, 2, 3] });
const sum = computed(() => state.list[0] + state.list[1]);
function changeFirst() {
  state.list[0] = 10; // 直接改索引，不触发响应式
}
</script>

调用changeFirst后，state.list[0]确实变10了，但sum还是1+2=3——因为Vue没察觉到数组变了。

怎么修？
用数组的响应式方法（如splice push pop等），或者把数组元素用ref包裹：

// 方法1：用splice修改
function changeFirst() {
  state.list.splice(0, 1, 10); // splice是响应式方法，Vue能感知
}
// 方法2：给数组元素套ref
const state = reactive({
  list: [ref(1), ref(2), ref(3)]
});
function changeFirst() {
  state.list[0].value = 10; // 改ref的value，触发更新
}

子坑2：对象新增/删除属性

给reactive对象新增属性（比如obj.age = 18）或删除属性（比如delete obj.name）时，默认也不触发响应式，如果computed依赖这些新增/删除的属性，就会失效。

举个例子：

<script setup>
const state = reactive({ info: { name: '张三' } });
const fullName = computed(() => state.info.name + '·' + state.info.age);
function addAge() {
  state.info.age = 18; // 新增age属性，Vue默认监听不到
}
</script>

调用addAge后，state.info.age确实有值了，但fullName还是张三·undefined——因为Vue没发现info多了个age属性。

怎么修？
用Vue的set方法（专门处理对象新增属性的响应式）：

<script setup>
import { reactive, computed, set } from 'vue';
const state = reactive({ info: { name: '张三' } });
const fullName = computed(() => state.info.name + '·' + state.info.age);
function addAge() {
  set(state.info, 'age', 18); // set让新增属性也能触发响应式
}
</script>

computed依赖了“非响应式外部变量”，更新逻辑失效

computed的更新逻辑是：只有响应式依赖变化时，才会重新计算，如果computed里用了Date.now()、Math.random()、外部普通函数返回值这些非响应式数据，就算它们的值变了，Vue也感知不到，computed自然不会更新。

举个例子：

<script setup>
function getRandom() {
  return Math.random(); // 非响应式的外部函数
}
const randomComputed = computed(() => getRandom() * 100);
function refresh() {
  // 调用后randomComputed不会自动更新，因为getRandom不是响应式依赖
}
</script>

点击refresh后，getRandom()确实返回新的随机数，但randomComputed还是旧值——因为Vue没把getRandom当“依赖”，根本不知道它变了。

怎么修？
把外部变量改成响应式，或者用watch主动触发更新：

// 方法1：把外部值存到ref里
const randomRef = ref(Math.random());
const randomComputed = computed(() => randomRef.value * 100);
function refresh() {
  randomRef.value = Math.random(); // 改ref的value，触发computed更新
}
// 方法2：用watch手动触发（适合复杂场景）
watch(
  () => getRandom(), // 监听外部函数返回值（虽然不是响应式，但watch能执行回调）
  () => {
    randomComputed.value; // 主动读取computed，触发重新计算
  }
);

computed的setter逻辑没正确更新依赖，导致“自循环”不更新

给computed加setter时，如果setter里没有修改getter的响应式依赖，会让getter的结果看似没变化，computed就不更新。

举个例子：

<script setup>
const state = reactive({ x: 1, y: 1 });
const product = computed({
  get() { return state.x * state.y; },
  set(val) { 
    console.log(val); // setter里没修改x或y，getter的依赖没变化
  }
});
</script>

调用product.value = 10时，setter执行了，但state.x和state.y没变化，所以product的getter结果还是1×1=1，看起来完全没更新。

怎么修？
确保setter里修改了getter的响应式依赖：

const product = computed({
  get() { return state.x * state.y; },
  set(val) { 
    state.x = val; // 改x，触发getter的依赖变化
    // 或者根据业务逻辑改y，只要能让x*y变化就行
  }
});