Vue 是一個流行的 JavaScript 框架，提供了一個方便的方式來構建交互式的 Web 應用程序。其中一個非常有用的功能是計算屬性 (computed)。它允許您基于已有的屬性值計算出一個新的屬性值。Vue 會自動追蹤依賴關系，并在相應依賴變更時重新計算。這使得計算屬性非常易于維護和更新。

然而，有時候使用計算屬性可能會導致一些問題。其中之一是在計算屬性的 getter 函數中重復使用已有的計算屬性。例如：

computed: {
a() {
return 1
},
b() {
return this.a + 1
},
c() {
return this.a + 2
},
d() {
return this.b + this.c
}
}

在上面的代碼中，計算屬性 b 和 c 兩個都使用了計算屬性 a，而計算屬性 d 又同時使用了計算屬性 b 和 c。如果存在大量計算屬性的依賴關系鏈，就可能導致計算屬性的 getter 函數的執行時間變長，從而降低應用程序的性能。

為了避免這種情況，可以將重復使用的計算屬性存儲為普通屬性，并在需要時手動更新。例如：

computed: {
a() {
return 1
},
b() {
return this.a + 1
},
c() {
return this.a + 2
},
d() {
return this.b + this.c
}
},
data() {
return {
cachedA: null
}
},
watch: {
a(newVal) {
this.cachedA = newVal
}
},
created() {
this.cachedA = this.a
}

在上面的代碼中，我們使用了一個名為 cachedA 的普通屬性來存儲計算屬性 a 的值。在計算屬性 a 發生變化時，我們使用一個名為 watch 的選項來監聽變化，并將新值存儲到 cachedA 中。在 created 生命周期鉤子中，我們初始化 cachedA，確保它的值與計算屬性 a 的初始值相同。

現在，我們可以在計算屬性 b 和 c 的 getter 函數中使用 cachedA，而不是計算屬性 a：

computed: {
a() {
return 1
},
b() {
return this.cachedA + 1
},
c() {
return this.cachedA + 2
},
d() {
return this.b + this.c
}
}

這樣一來，我們就避免了在 getter 函數中重復計算計算屬性，從而提高了應用程序的性能。