在 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中文網其他相關文章！
