Vue3中TypeScript类Ref属性自动解包及实例转Proxy问题咨询

问题A：Proxy包裹的实例调用函数时自动解包Ref的原因 #

Vue3的响应式系统基于Proxy实现，当你将类实例通过ref/reactive转为响应式对象时，生成的Proxy会拦截所有属性访问操作。对于属性值为Ref类型的情况，Proxy的get拦截器会自动执行解包逻辑——直接返回Ref的.value值，而非Ref对象本身。

当通过Proxy调用类实例的方法时，方法内部的this指向的是Proxy实例而非原始类实例。因此访问this.passengers时，Proxy会自动解包Ref，此时直接用this.passengers.length就能获取数组长度；而原始类实例的this指向自身，必须通过.value访问Ref的实际值。

问题B：Vue自动将普通实例转为Proxy的触发条件 #

Vue的响应式API（ref/reactive/computed等）默认会对传入的对象进行深度递归转换：只要对象（包括嵌套的子对象、类实例）被传入这些API，Vue就会将其所有嵌套的引用类型转为Proxy，以实现深度响应式。

比如你提供的示例中，car被传入ref后，Vue会递归处理car的所有属性，其中driver是Person类实例，因此会被自动转为Proxy。

根本解决办法 #

1. 标记无需响应式的实例（推荐） #

如果某些类实例不需要成为响应式对象，使用markRaw标记它，Vue会跳过对该实例的Proxy转换，这样类内部的Ref访问逻辑可以统一使用.value：

import { markRaw, ref } from 'vue';

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Car {
  driver: Person;
  constructor(driver: Person) {
    this.driver = driver;
  }
}

// 用markRaw标记，避免被转为Proxy
const driver = markRaw(new Person("John"));
const car = new Car(driver);
const carRef: Ref<Car> = ref(car);

console.log(driver); // 仍然是原始Person实例

2. 类内部统一使用原始实例访问Ref #

在类的方法中，通过toRaw获取原始实例，确保无论this是Proxy还是原始实例，都能统一用.value访问Ref：

import { toRaw } from 'vue';

class Car {
    passengers: Ref<Passenger[]>;

    getNumberPassenger(): number {
        // 获取原始实例，避免Proxy的自动解包影响
        const rawThis = toRaw(this);
        return rawThis.passengers.value.length;
    }
}

3. 重构类的响应式设计 #

如果类本身是为响应式场景设计，建议将类内部的Ref属性改为普通值，然后用reactive包裹整个类实例，避免类内部嵌套Ref：

import { reactive } from 'vue';

class Car {
    // 改为普通数组，由reactive实现响应式
    passengers: Passenger[];

    constructor() {
        this.passengers = [];
    }

    getNumberPassenger(): number {
        // 直接访问，无需.value
        return this.passengers.length;
    }
}

// 用reactive包裹整个实例
const car = reactive(new Car());

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