Vue 计算属性中的箭头函数
问题:
在 Vue 计算中使用箭头函数属性可能会导致意外行为。将计算属性中的方法更改为箭头函数后,即使底层数据值仍然成功切换,DOM 元素的颜色也不会改变。
答案:
出现此问题是因为箭头函数不会将 this 绑定到定义计算属性的 Vue 实例。此行为与使用箭头函数的其他上下文一致,例如在实例方法中。
根据 Vue 文档:
“不要在实例属性或回调上使用箭头函数(例如 vm.$watch('a', newVal => this.myMethod()))。由于箭头函数绑定到父上下文,因此 this 不会是您想要的 Vue 实例。 Expect 和 this.myMethod() 将是未定义的。”
解决方案:
要解决此问题,请避免在计算属性或实例方法中使用箭头函数。相反,使用传统的函数语法(例如,function() { ... })将 this 正确绑定到 Vue 实例。
以上是为什么箭头函数在 Vue 计算属性中不能按预期工作?的详细内容。更多信息请关注PHP中文网其他相关文章!