为什么箭头函数在 Vue 计算属性中不能按预期工作？

Vue 计算属性中的箭头函数

问题：

在 Vue 计算中使用箭头函数属性可能会导致意外行为。将计算属性中的方法更改为箭头函数后，即使底层数据值仍然成功切换，DOM 元素的颜色也不会改变。

答案：

出现此问题是因为箭头函数不会将 this 绑定到定义计算属性的 Vue 实例。此行为与使用箭头函数的其他上下文一致，例如在实例方法中。

根据 Vue 文档：

“不要在实例属性或回调上使用箭头函数（例如 vm.$watch('a', newVal => this.myMethod())）。由于箭头函数绑定到父上下文，因此 this 不会是您想要的 Vue 实例。 Expect 和 this.myMethod() 将是未定义的。”

解决方案：

要解决此问题，请避免在计算属性或实例方法中使用箭头函数。相反，使用传统的函数语法（例如，function() { ... }）将 this 正确绑定到 Vue 实例。

以上是为什么箭头函数在 Vue 计算属性中不能按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！