TypeError: Cannot read private member xxx from an object whose class did not declare it
问题发生场景
在vue3中使用reactive响应式转换一个带有私有属性的对象。
大致原因
在js中，代理Proxy和类的私有属性无法公用，而vue3的响应式是基于代理的。
简单例子
function logReads(target) {
return new Proxy(target, {
get(obj, prop, receiver) {
console.log(prop);
return Reflect.get(obj, prop, receiver)
},
});
}
class TodoList {
#items = [];
threshold = 50;
countCheap() {
return this.#items.reduce((n, item) => item.price < this.threshold ? n : n + 1, 0);
}
}
let list = logReads(new TodoList());
list.countCheap(); // TypeError: Cannot read private member #items from an object whose class did not declare it
