如何在 VueJS 中实现箭头功能？答案

【问题标题】：How can I implement arrow function in VueJS?如何在 VueJS 中实现箭头功能？
【发布时间】：2020-03-16 00:23:00
【问题描述】：

我在 vue 中的方法是这样的：

methods: { 
    setDate: async function () {
        console.log(this.modal)
    }
}

我想把它改成箭头函数。我试过这样：

methods: { 
    setDate: async () => {
        console.log(this.modal)
    }
}

存在这样的错误：

Cannot read property 'modal' of undefined

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

直接使用函数

methods: { 
    async setDate() {
        console.log(this.modal)
    }
}

【讨论】：

【解决方案2】：

此链接https://michaelnthiessen.com/this-is-undefined/ 说明如下：

“箭头函数使用所谓的词法作用域。我们稍后会详细介绍，但这基本上意味着箭头函数从其上下文中获取 this。

如果您尝试从 Vue 组件上的箭头函数内部访问 this，则会收到错误消息，因为 this 不存在！

所以简而言之，尽量避免在 Vue 组件上使用箭头函数。它将为您省去很多麻烦和困惑。”

【讨论】：

【解决方案3】：

您正面临此错误，因为箭头函数不会将 this 绑定到您为其定义方法的 vue 实例。如果您要使用箭头函数定义计算属性，也会发生同样的情况。

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

vm.$watch('a', newVal => this.myMethod())

由于箭头函数绑定到父上下文，这将不是您期望的 Vue 实例，this.myMethod 将未定义。

你可以阅读它here。

【讨论】：