為什麼使用箭頭函數時我的 Vue 計算屬性沒有更新？

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

在 Vue 中，箭頭函數可用來定義計算屬性。但是，使用者在使用箭頭函數時可能會遇到計算元素的顏色沒有改變的問題。

原始程式碼與修改後程式碼的比較

原始程式碼使用傳統函數語法定義計算屬性：

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  switchGreen: function() {
    return { green: this.turnGreen };
  },
  switchBlue: function() {
    return { blue: this.turnBlue };
  }
}

修改程式碼使用箭頭函數後，問題出現：

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  switchGreen: () => {
    return { green: this.turnGreen };
  },
  switchBlue: () => {
    return { blue: this.turnBlue };
  }
}

根本原因

問題出在箭頭函數的使用上。箭頭函數從父級繼承 this 上下文，而傳統函數語法將 this 綁定到 Vue 實例。在計算屬性中使用箭頭函數時，this沒有綁定到Vue實例，導致計算元素顏色更新失敗。

解決方案

至要解決該問題，建議對計算屬性使用傳統函數語法。或者，可以對方法使用箭頭函數，但使用 bind 或 apply 方法將其明確綁定到 Vue 實例非常重要。

以上是為什麼使用箭頭函數時我的 Vue 計算屬性沒有更新？的詳細內容。更多資訊請關注PHP中文網其他相關文章！