為什麼箭頭函數會破壞 Vue.js 中的計算屬性？

在計算的Vue 屬性中使用箭頭函數

在Vue.js 中，處理計算屬性中的資料和邏輯至關重要。但是，在這些計算屬性中使用箭頭函數可能會導致意外行為。

最初，對計算屬性使用傳統函數聲明可以按預期工作，如以下程式碼片段所示：

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

但是，切換到計算屬性中的箭頭函數會導致出現以下問題：即使值已正確更新，顏色變更也會停止運作。

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

此問題出現這種情況是因為箭頭函數不會將 this 上下文綁定到定義了計算屬性的 Vue 實例。通常，計算屬性將其綁定到實例，從而允許存取實例資料和方法。然而，對於箭頭函數，this 保留了其父級的上下文，通常是 JavaScript 中的全域範圍，而不是 Vue 實例。

因此，this.turnRed 在箭頭函數中變得未定義，導致顏色改變失敗。此行為記錄在 Vue.js 文件中，由於這個原因，該文件建議不要對實例屬性或回調使用箭頭函數。

要解決此問題，請恢復使用傳統函數宣告來計算屬性，確保正確綁定。

以上是為什麼箭頭函數會破壞 Vue.js 中的計算屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！