為什麼箭頭函數會破壞 Vue 計算屬性，如何修復它們？

在 Vue 計算屬性中使用箭頭函數：故障排除

在 Vue 中，計算屬性用於從其他屬性派生反應值。雖然箭頭函數可以在許多情況下簡化程式碼，但在計算屬性中使用它們時可能會出現問題。

原始程式碼（工作）：

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  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 綁定到 Vue 實例。相反，它們繼承父作用域的上下文。在這種情況下，父作用域是全域作用域，因此 this 指的是 window 對象，而不是預期的 Vue 實例。因此，turnRed、turnGreen 和turnBlue 值保持未初始化狀態，導致顏色不變。

解決方案：

要解決此問題並使箭頭函數在計算屬性中工作，Vue建議使用bind方法將this明確綁定到Vue實例：

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

以上是為什麼箭頭函數會破壞 Vue 計算屬性，如何修復它們？的詳細內容。更多資訊請關注PHP中文網其他相關文章！