在vue生命週期裡呼叫函式時犯的一個錯誤

多芒小丸子發表於2018-10-10

最近都在用es6的語法開發,也深刻感受到了箭頭函式的魅力,所以在寫道vue生命週期函式的時候也很慣性的用了箭頭函式的寫法,箭頭函式this的指向在這個時候卻引出了bug。

在vue中所有的生命週期鉤子自動繫結 this 上下文到例項中,因此你可以訪問資料,對屬性和方法進行運算。這意味著你不能使用箭頭函式來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是因為箭頭函式繫結了父上下文,因此 this 與你期待的 Vue 例項不同。

methods: {
  gerQrCode() {
  }
}
//生命週期函式要用普通函式的形式
//寫成箭頭函式形式的話引用方法時會報錯方法未定義。
mounted() {
  this.getQrCode()
},
複製程式碼

相關文章