Vue TSC 中处理计算属性与响应式解包的最佳实践

在 Vue 的 TypeScript 开发中，开发者经常会遇到计算属性(ComputedRef)与响应式解包(UnwrapNestedRefs)之间的类型冲突问题。本文将通过一个典型场景分析问题本质，并提供几种实用的解决方案。

问题场景分析

考虑以下代码示例：

import { computed, ComputedRef, UnwrapNestedRefs } from "vue";

interface ConcreteTest {
    val: ComputedRef<string>;
}

interface Store {
    registers: ConcreteTest[];
}

class StoreManager {
    public store: UnwrapNestedRefs<Store> = {
        registers: []
    };

    addRegisters(){
        const val = computed(() => { return "0xaa" });
        this.store.registers.push({ val }); // 类型错误
    }
}

这段代码会抛出类型错误："The expected type comes from property 'val' which is declared here on type '{ val: string; }'"。这是因为 Vue 的响应式系统在解包嵌套引用时，会自动解包 ComputedRef 类型。

问题本质

问题的核心在于 UnwrapNestedRefs 类型的行为特性。这个类型工具会自动解包嵌套的响应式引用，包括：

1. 将 Ref<T> 解包为 T
2. 将 ComputedRef<T> 解包为 T
3. 递归处理对象属性

因此，当我们声明 store 为 UnwrapNestedRefs<Store> 时，其中的 ConcreteTest 接口中的 val: ComputedRef<string> 会被自动解包为 val: string，导致类型不匹配。

解决方案

方案一：直接使用计算属性的值

addRegisters(){
    const val = computed(() => { return "0xaa" });
    this.store.registers.push({ val: val.value });
}

这种方法简单直接，但会失去计算属性的响应式特性，适合不需要响应式更新的场景。

方案二：移除 UnwrapNestedRefs

class StoreManager {
    public store: Store = {
        registers: []
    };
    // ...其余代码保持不变
}

移除 UnwrapNestedRefs 可以保留原始类型定义，但需要注意这会改变整个对象的响应式行为。

方案三：使用 shallowRef

对于需要保持响应式但又想控制解包行为的场景，可以使用 shallowRef：

import { shallowRef } from "vue";

class StoreManager {
    public store = shallowRef<Store>({
        registers: []
    });
    
    addRegisters(){
        const val = computed(() => { return "0xaa" });
        this.store.value.registers.push({ val });
    }
}

shallowRef 只会对顶层的属性进行响应式处理，不会自动解包嵌套的引用，从而保留计算属性的原始类型。

最佳实践建议

1. 明确响应式需求：在设计数据结构时，明确哪些属性需要响应式更新，哪些不需要。

2. 谨慎使用 UnwrapNestedRefs：这个类型工具虽然方便，但会带来隐式的类型转换，可能产生意料之外的行为。

3. 考虑使用 shallowRef：当需要精确控制响应式行为时，shallowRef 提供了更细粒度的控制。

4. 类型一致性：确保接口定义与实际使用场景匹配，避免因自动解包导致的类型不一致。

通过理解 Vue 响应式系统的类型处理机制，开发者可以更有效地设计数据结构，避免类型冲突，同时充分利用 TypeScript 的类型安全特性。