首页 > web前端 > js教程 > 为什么箭头函数在 Vue 计算属性中不能按预期工作?

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

Susan Sarandon
发布: 2024-11-24 20:47:31
原创
843 人浏览过

Why Don't Arrow Functions Work as Expected in Vue Computed Properties?

Vue 计算属性中的箭头函数

问题:

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

答案:

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

根据 Vue 文档:

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

解决方案:

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

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板