为什么箭头函数会破坏 Vue 计算属性，如何修复它们？-js教程-PHP中文网

为什么箭头函数会破坏 Vue 计算属性，如何修复它们？

Barbara Streisand

发布： 2024-11-26 03:33:18

原创

430 人浏览过

Why Do Arrow Functions Break Vue Computed Properties, and How Can I Fix Them?

在 Vue 计算属性中使用箭头函数：故障排除

在 Vue 中，计算属性用于从其他属性派生反应值。虽然箭头函数可以在许多情况下简化代码，但在计算属性中使用它们时可能会出现问题。

原始代码（工作）：

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  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 绑定到 Vue 实例。相反，它们继承父作用域的上下文。在这种情况下，父作用域是全局作用域，因此 this 指的是 window 对象，而不是预期的 Vue 实例。因此，turnRed、turnGreen 和turnBlue 值保持未初始化状态，导致颜色不变。

解决方案：

要解决此问题并使箭头函数在计算属性中工作，Vue建议使用bind方法将this显式绑定到Vue实例：

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  }.bind(this),
  switchGreen: () => {
    return { green: this.turnGreen };
  }.bind(this),
  switchBlue: () => {
    return { blue: this.turnBlue };
  }.bind(this)
}

登录后复制

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