為什麼 Vue.js 生命週期掛鉤和計算屬性中的「this」變得未定義？

VueJS: "this" 在生命週期鉤子和計算屬性中未定義

在Vue.js 中，你可能會遇到訪問"this" 的情況”生命週期掛鉤或計算屬性中的關鍵字傳回「未定義」。 =>; {} 將「this」關鍵字綁定到Vue 實例外部的上下文。實例本身。 Vue

範例2：

這裡，計算屬性使用箭頭函數，這會導致對“this.bar”的引用求值為 undefined ，導致錯誤“無法讀取屬性‘bar’

解決方案：

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

要解決此問題並訪問對“this”的正確引用，請使用常規函數或 ES5 簡寫：

常規函數：

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

ES5簡寫：

透過使用這些方法，您可以確保「this」在生命週期內引用Vue實例鉤子和計算屬性。

以上是為什麼 Vue.js 生命週期掛鉤和計算屬性中的「this」變得未定義？的詳細內容。更多資訊請關注PHP中文網其他相關文章！