為什麼 Vue.js 元件和使用箭頭函數計算的屬性中的「this」未定義？

為什麼在 Vue.js 元件和計算屬性中未定義對「this」的引用？

在 Vue.js 中，定義元件和利用計算屬性涉及使用「this」關鍵字。然而，開發人員經常遇到這樣的問題：在某些情況下，「this」的計算結果為「未定義」。本文旨在闡明發生這種情況的原因並提供解決方案。

在生命週期鉤子（例如 Mounted 和 Updated）或計算屬性中使用箭頭函數（例如 () => {}）時， 「this」可能與預期的 Vue 實例不同。 Vue.js 文件明確建議不要在此類上下文中使用箭頭函數。相反，開發人員應該使用常規函數或 ECMAScript 5 速記語法來確保「this」正確引用 Vue 實例。

考慮組件的範例：

mounted: () => {
  console.log(this); // returns "undefined"
},

在這種情況下，箭頭函數 () => {} 將「this」綁定到 Vue 元件外部的不同上下文。因此，在函數外部使用“this”存取屬性或方法將會失敗。

同樣，在計算屬性中：

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

使用箭頭函數 () = 計算屬性的值評估> {} 也會導致「this」未定義。這會導致錯誤「無法讀取未定義的屬性'bar'。」

要修正此問題，可以使用常規JavaScript 函數或ECMAScript 5 簡寫：

mounted: function () {
  console.log(this); // correctly logs the Vue instance
}

mounted() {
  console.log(this); // also correctly logs the Vue instance
}

這些範例示範了常規函數或ECMAScript 5 速記方式如何將「this」正確綁定到Vue元件實例，解決「this」計算結果為「未定義」的問題。

以上是為什麼 Vue.js 元件和使用箭頭函數計算的屬性中的「this」未定義？的詳細內容。更多資訊請關注PHP中文網其他相關文章！