为什么箭头函数会破坏 Vue.js 中的计算属性？

在计算属性中使用箭头函数

在 Vue.js 中，处理计算属性中的数据和逻辑至关重要。但是，在这些计算属性中使用箭头函数可能会导致意外行为。

最初，对计算属性使用传统函数声明可以按预期工作，如以下代码片段所示：

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

但是，切换到计算属性中的箭头函数会导致出现以下问题：即使值已正确更新，颜色更改也会停止工作。

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

此问题出现这种情况是因为箭头函数不会将 this 上下文绑定到定义了计算属性的 Vue 实例。通常，计算属性将其绑定到实例，从而允许访问实例数据和方法。然而，对于箭头函数，this 保留了其父级的上下文，通常是 JavaScript 中的全局范围，而不是 Vue 实例。

因此，this.turnRed 在箭头函数中变得未定义，导致颜色改变失败。此行为记录在 Vue.js 文档中，由于这个原因，该文档建议不要对实例属性或回调使用箭头函数。

要解决此问题，请恢复使用传统函数声明来计算属性，确保正确绑定。

以上是为什么箭头函数会破坏 Vue.js 中的计算属性？的详细内容。更多信息请关注PHP中文网其他相关文章！