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