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

LLJ97 发表于 Dev

LLJ97

我今天注意到的某些事情使我感到困惑。

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

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

约翰·约翰逊

这不是关于Vue的问题，而是关于javascript本身的问题。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-26

0 条评论

登录后参与评论