Why ref.value can‘t access private properties declared with #, but with TypeScript‘s `private` it...

题意：

Why ref.value can't access private properties declared with #, but with TypeScript's `private` it can?

为什么 ref.value 不能访问使用 # 声明的私有属性，但可以访问使用 TypeScript 的 private 声明的私有属性

 

问题背景：

I have two classes declared.Goods and User

我声明了两个类：`Goods` 和 `User`。

class Goods {
    #price: number
    #quantity: number

    constructor(price: number, quantity: number) {
       this.#price = price;
       this.#quantity = quantity;
    }

    get totalPrice() {
       return this.#price * this.#quantity;
    }

    totalPriceFunc() {
       return this.#price * this.#quantity;
    }
}

class User {
    private id: number
    private name: string;

    constructor(id: number, name: string) {
       this.id = id;
       this.name = name;
    }

    get info() {
       return `id: ${this.id}, name: ${this.name}`;
    }

    infoFunc() {
       return `id: ${this.id}, name: ${this.name}`;
    }
}

init Goods and User and use vue3 ref;

初始化 Goods 和 User 并使用 Vue 3 的 ref

const g = new Goods(10, 100);
console.log('>>>>>>>g ref before: ', g.totalPrice, g.totalPriceGetFunc());
// >>>>>>>g ref before:  1000 1000

const gRef = ref<Goods>(g);
console.log('>>>>>>>g ref after: ', g.totalPrice, g.totalPriceGetFunc());
// >>>>>>>g ref after:  1000 1000

try {
    console.log('gRef totalPrice: ', gRef.value.totalPrice);
    console.log('gRef totalPriceGetFunc: ', gRef.value.totalPriceGetFunc());
} catch (e) {
    console.error(e);
        // TypeError: Cannot read private member #price from an object whose class did not declare it
        // at get totalPrice (HelloWorld.vue:19:15)
        // at Reflect.get (<anonymous>)
        // at MutableReactiveHandler.get (reactivity.esm-bundler.js:928:25)
        // at setup (HelloWorld.vue:50:46)
        // at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)
        // at setupStatefulComponent (runtime-core.esm-bundler.js:7847:25)
        // at setupComponent (runtime-core.esm-bundler.js:7808:36)
        // at mountComponent (runtime-core.esm-bundler.js:5161:7)
        // at processComponent (runtime-core.esm-bundler.js:5127:9)
       //  at patch (runtime-core.esm-bundler.js:4645:11)
}
-------------------------------------------------------------------

const u = ref<User>(new User(1, 'Daniel'));

console.log('u info: ', u.value.info);
// u info:  id: 1, name: Daniel

console.log('u infoFunc: ', u.value.infoFunc());
// u infoFunc:  id: 1, name: Daniel

Why is it that the #price property of Goods cannot be used when using ref to declare responsive state, but private id private name can be used normally?

为什么在使用 ref 声明响应式状态时，Goods 的 #price 属性无法使用，而 private id 和 private name 可以正常使用

 

问题解决：

Primitive values in Vue, such as #price are not made "reactive" as the ref only tracks public properties. This is just the nature of Vue's framework.

Vue 中的原始值，如 `#price`，不会被设置为“响应式”，因为 `ref` 只跟踪公共属性。这正是 Vue 框架的本质。

 

It works when you use "private", as it is coming from TypeScript, not Vue. It is a so-called compile time annotation and therefore will not be enforced at runtime. See more here.

当你使用“private”时它是有效的，因为它来自 TypeScript，而不是 Vue。这是一种所谓的编译时注释，因此在运行时不会被强制执行。有关更多信息，请参见这里