小编LLJ*_*J97的帖子

我今天注意到的一件事让我很困惑。

当我第一次使用 Vue 时，有两种常见的方法来定义方法。

methods: {
    foo: () => {
        //do something
    }
}

和

methods: {
    foo() {
        //do something
    }
}

两者都没有任何问题。

今天我定义了一个像第一个例子一样的方法，我this在函数内部的作用域上遇到了问题。

对于上下文：

我有这样定义的数据：

data() {
    return {
        fooVar: ''
    }
}

我的方法是这样定义的。

methods: {
    foo: () => {
        console.log('Foo: '+this.fooVar);
    }
}

当我检查控制台时，它说

Foo: undefined

然后我将方法声明更改为

foo() {
    console.log('Foo: '+this.fooVar)
}

它没有任何问题。

因此，由于我认为foo() {...}和foo: () => {...}是同一件事（除了声明本身），我想知道函数的范围是否在这两种方式之间发生变化。

它会改变吗？如果是，为什么会改变？