前端 - [Typescript]用类属性包装ref，则修改类属性会触发响应式吗？

Question

class Foo {  ref: Ref<number>  get value() {    return this.ref?.value  }  set value(nv: number) {    this.ref.value = nv  }  constructor() {    this.ref = ref(0)  }}const foo = new Foo()

<button @click="foo.value++">{{ foo.value }}</button>

在vue3中，以上代码定义一个class Foo，使用类属性value包装了Ref类型的成员ref。在template中，一个button被用于显示并修改Foo实例foo的value的值。请问隔了一层get/set，点击button间接修改ref时，仍能触发响应式以更新视图吗？

答案为能。why？

Answer 1

点击按钮，触发 onClick，运行 foo.value++，调用 setter，运行 this.ref?.value = nv，触发视图更新