Vue的computed属性出现突然不更新的原因及解决方案

// 简化版依赖收集过程
function defineComputed(target, key, computeFn) {
  const watcher = new Watcher(
    vm,
    computeFn,
    { lazy: true } // 标记为computed watcher
  );
  
  Object.defineProperty(target, key, {
    get() {
      if (watcher.dirty) {
        watcher.evaluate(); // 重新计算
      }
      if (Dep.target) {
        watcher.depend(); // 依赖收集
      }
      return watcher.value
    }
  })
}

computed: {
  fullName() {
    return this.user.firstName + ' ' + this.user.lastName; 
    // 如果user不是响应式对象，或者firstName/lastName未用Vue.set声明
  }
}

computed: {
  filteredItems() {
    return this.items.filter(item => item.active);
    // 当通过索引直接修改数组元素时可能不触发更新
  }
}

computed: {
  asyncComputed() {
    return fetchData().then(data => { 
      // 计算属性应保持同步，这种模式会破坏响应链
    });
  }
}

created() {
  const filter = 'active';
  this.computedVal = () => {
    return this.list.filter(item => item.status === filter);
    // filter不是响应式依赖
  };
}

mounted() {
  console.log(this._watchers); 
  // 查找对应computed watcher的deps
}

computed: {
  myComputed: {
    get() { /*...*/ },
    set() { 
      // 空setter可强制建立依赖关系
    }
  }
}

import { watchEffect, ref } from 'vue';

// Vue3组合式API方案
const computedVal = ref(null);
watchEffect(() => {
  computedVal.value = heavyCalculation();
});

computed: {
  expensiveOp: {
    cache: false, // 禁用缓存（慎用）
    get() { /*...*/ }
  }
}

// Vue3的独立computed
import { computed, reactive } from 'vue';
const state = reactive({ count: 0 });
const double = computed(() => state.count * 2);