為什麼 Vue.js 箭頭函數中的「this」未定義？

VueJS：解決「this」未定義問題

箭頭函數可能是 VueJS 中的一個陷阱，導致意外的未定義值。這是因為箭頭函數繼承其父級的上下文，而不是綁定到 Vue 實例。

生命週期鉤子

在 Mounted 等生命週期鉤子中使用箭頭函數時， this 不是指 Vue 實例。相反，它指的是父上下文，通常是 HTML 元素或觸發掛載鉤子的 Vue 元件。

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

計算屬性

箭頭函數計算屬性中也會導致未定義的值。由於它們繼承了父上下文，因此 this 並未引用 Vue 實例。

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

這會導致錯誤「Uncaught TypeError: Cannot read property 'bar' of undefined」。

解決方案

要解決此問題，請使用常規函數或ECMAScript 5 函數簡寫而不是箭頭函數：

mounted: function () {
  console.log(this);
},

mounted() {
  console.log(this);
}

透過使用這些方法，您可以確保this 始終引用Vue 實例，在生命週期掛鉤和計算屬性中提供預期的行為。

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