Vue3中如何将Computed ref提取为可复用函数？解决提取后失效问题

你提取复用函数时犯了一个关键错误：调用computedDoc时直接传入user.value?.currentAuditId，这只是当前时刻的静态值，并非响应式依赖。后续user更新时，函数参数里的documentId不会同步变化，导致computed内部没有监听任何响应式数据，自然不会触发重新计算。

而原来的代码能正常工作，是因为computed回调里直接访问了user.value?.currentAuditId，Vue会自动追踪这个响应式依赖，当user变化时就会触发重新计算。

有两种实用的修复方式，任选其一即可：

方案一：传入动态获取ID的Getter函数 #

让computedDoc接收一个用来动态获取documentId的函数，这样computed内部调用该函数时，就能追踪到user的响应式依赖：

const computedDoc = (collectionPath: string, getDocumentId?: () => string | undefined) => {
  return computed(() => {
    const documentId = getDocumentId?.();
    console.log(documentId); // 现在会随user变化打印最新值
    if (documentId) {
      return doc(collection(firestore, collectionPath), documentId);
    } else {
      return doc(collection(firestore, collectionPath));
    }
  });
};

// 使用时传入获取currentAuditId的函数
const audit = useDocument<Audit>(
  computedDoc("audits", () => user.value?.currentAuditId)
);

方案二：传入响应式对象/Ref #

如果user本身是Ref或Reactive对象，直接传入user，在computedDoc内部访问它的属性，同样能建立响应式依赖：

// 假设user是Ref类型
const computedDoc = (collectionPath: string, userRef: Ref<User | undefined>) => {
  return computed(() => {
    const documentId = userRef.value?.currentAuditId;
    console.log(documentId);
    if (documentId) {
      return doc(collection(firestore, collectionPath), documentId);
    } else {
      return doc(collection(firestore, collectionPath));
    }
  });
};

// 使用时直接传入user Ref
const audit = useDocument<Audit>(
  computedDoc("audits", user)
);

• Vue的computed只有在回调内部访问响应式数据时，才会建立依赖追踪并自动更新。
• 提取复用函数时，不能直接传递静态值，要传递能动态获取响应式数据的方式（Getter函数或响应式对象本身）。

内容的提问来源于stack exchange，提问作者TinyTiger