Vue.js 方法声明之间的区别

Question

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

当我第一次使用 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: () => {...}是同一件事（除了声明本身），我想知道函数的范围是否在这两种方式之间发生变化。

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

Answer 1

这与其说是关于 Vue 的问题，不如说是关于 javascript 本身的问题。

简而言之，箭头函数（用 (x) => { doSomething(x); } 定义）与通常的函数不同。它们没有自己的“this”，只能访问它们定义的作用域（如果没有作用域，默认为 window 或 global（在 nodejs 中）。它们最好用在它们不作为对象实例的方法的地方。