Javascript 在vue计算中使用箭头功能不起作用

我正在学习Vue，在计算属性中使用箭头函数时遇到了一个问题

我的原始代码运行良好（请参阅下面的代码片段）

newvue({
el:“#应用程序”，
数据：{
变红：错，
格林：错，
蓝：错
},
计算：{
switchRed：函数（）{
return{red:this.turnRed}
},
绿色开关：函数（）{
return{green:this.turnGreen}
},
switchBlue：函数（）{
return{blue:this.turnBlue}
}
}
});
.demo{
宽度：100px；
高度：100px；
背景颜色：灰色；
显示：内联块；
利润率：10px；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
您正面临此错误，因为arrow函数不会将此

绑定到您正在为其定义计算属性的vue实例。如果使用箭头函数定义

方法

，也会发生同样的情况

不要在实例属性或回调上使用箭头函数（例如，

vm.$watch（'a'，newVal=>this.myMethod（））

。由于箭头函数绑定到父上下文，因此这将不是您预期的Vue实例，并且

this.myMethod

将是未定义的

---

您可以阅读它。

箭头函数丢失了Vue组件上下文。对于

方法

、

计算

、

观察

等中的函数，请使用对象函数：

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

---

当您不使用

=>

创建计算机时，您应该只使用

switchRed（）{…

请看一下代码段。它可以正常工作

它适用于所有计算机、方法、观察者等。

newvue({
el:“#应用程序”，
数据：{
变红：错，
格林：错，
蓝：错
},
计算：{
切换红色（）{
return{red:this.turnRed}
},
切换绿色（）{
return{green:this.turnGreen}
},
蓝色（）{
return{blue:this.turnBlue}
}
}
})；

.demo{
宽度：100px；
高度：100px；
背景颜色：灰色；
显示：内联块；
利润率：10px；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}

---

为什么不做这样简单的事情呢

newvue({
el:“#应用程序”，
数据：{
变红：错，
格林：错，
蓝：错
},
方法：{
切换（颜色）{
这个[`turn${color}`]=！这个[`turn${color}`]；
}
}
})；

.demo{
宽度：100px；
高度：100px；
背景颜色：灰色；
显示：内联块；
利润率：10px；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}

---

你可以通过解构你想要的东西来实现这一点：

计算：{
switchRed:（{turnRed}）=>{red:turnRed}，
switchGreen:（{turnGreen}）=>{green:turnGreen}，
switchBlue:（{turnBlue}）=>{blue:turnBlue}
}

我不知道这在将来是否会适得其反，但显然，vue对象属性中使用的箭头函数会将

此

上下文作为第一个参数接收：

props: ['foo'],

data: (ctx) => ({
  firstName: 'Ryan',
  lastName: 'Norooz',
  // context is available here as well like so:
  bar: ctx.foo
}),

computed: {
  fullName: ctx => ctx.firstName + ' ' + ctx.lastName // outputs: `Ryan Norooz`
}

---

这样，您仍然可以访问组件上下文中的所有内容，就像

this

！

看看我的答案。我已经包含了工作截断。箭头函数将其范围更改为其父函数这是否回答了您的问题？我唯一可以添加的是，如果这些函数中包含函数，例如回调，则使用arrow函数将使代码更干净，因为它使用了封闭上下文中的此对象，即vue实例。这是最有用的答案，因为它解释了如何解决此问题。我建议将此答案和接受的答案作为实际的“整体理想答案”回答。我注意到一件奇怪的事情是，当您使用arrow函数定义计算属性，然后使用chrome devtools进行调试时，“this”似乎仍在引用VueJS组件上下文。我花了很长时间才发现arrow函数导致了我的问题，因为当我将“debugger”语句放入arrow函数，然后检查“this”，所有的组件数据都显示出来了，但是当我试图控制台.log（）我的组件数据时，它是未定义的。虽然您可以在不需要访问

this

对象时使用arrow函数：computed:{switchRed:（）=>（{red:“red”}），…}您可以使用arrow函数并通过解构访问此对象。请参阅我的答案。这是有效的，因为计算属性接收组件实例作为其第一个参数。因此这基本上是switchRed:（this）=>{red:this.turnRed}