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?
点击按钮,触发
onClick
,运行foo.value++
,调用setter
,运行this.ref?.value = nv
,触发视图更新