vue对含有私有变量的类使用ref报错Cannot write private member xxx to an object whose class did not declare it

• 当vue使用ref/reactive声明一个响应式的对象时，若该对象的某个成员变量（也是个对象）会操作它自己的私有变量，则会报错TypeError: Cannot write private member xxx to an object whose class did not declare it。具体如下面的例子

import { ref } from 'vue'
class Outer {
    inner: Inner = new Inner('aaa')
    getInnerName() {
        return this.inner.getName()
    }
}
class Inner {
    #name: string
    constructor(name: string) {
        this.#name = name
    }
    getName() {
        return this.#name
    }
}
const outer = ref(new Outer())
console.log(outer.value.getInnerName()) // 报错：TypeError: Cannot read private member #name from an object whose class did not declare it

• 原因：ref代理后导致其地址改变，在私有变量看来不再是私有变量所属的类，因此会报错无法访问其他类的私有变量。
• 解决办法：
  • 使用shallowRef进行浅层响应式，但是要注意，使用shallowRef会造成所有的引用类型的成员变量都无法进行响应式更新
  • 在类内部使用markRaw标记Inner。markRaw是vue提供的方法，用以将一个对象标记为不可被转为代理，因此标记后在ref(Outer)时，内层的Inner不会被转为代理
  • 放弃使用类。使用类是reactive的习惯，vue的sfc写法其实不需要使用类