在Vue 3中，通過類屬性包裝ref后，修改類屬性是否還能觸發響應式更新視圖？

本文探討在vue 3中，使用類屬性包裝ref后，修改類屬性是否會觸發響應式更新視圖。

讓我們來看一個示例代碼：

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();

模板中：

{{ foo.value }}

在這個例子中，Foo類使用get和set方法封裝了ref對象的訪問。當我們通過foo.value++修改foo實例的value屬性時，Vue 3的響應式系統能否更新視圖？

立即學習“前端免費學習筆記（深入）”；

答案是肯定的。這是因為set value方法直接修改了ref對象的value屬性。Vue 3的響應式系統追蹤依賴，當foo.value被讀取時，Vue建立依賴關系；當foo.value被修改時，Vue檢測到變化并更新依賴它的視圖。 因此，即使通過get和set方法間接修改，Vue仍然能檢測到變化并更新視圖。

結論：即使通過類屬性包裝ref，修改該類屬性仍然能觸發Vue 3的響應式系統更新視圖。 這得益于Vue 3對ref對象的響應式追蹤機制。