javascript - 在 Vue 中调用“this”会返回 Window

Question

我一生都无法弄清楚这一点。我有一个看起来超级简单的代码块，实例化一个新的 Vue 对象，该对象连接到一个带有 id 提供程序的 div。

const app = new Vue({
    el: '#providers', 
    data: {
        providers: []
    },
    created: () => {
        console.log(this);
    },
})

出于某种原因，当我调用console.log(this)created 时，它正在返回"Window {window: Window, self: Window, document: document, name: "", location: Location, …}"

我在跑步Vue 2.6.12。谁能帮我解决这个问题？

因此，我无法在我的生命周期命令中访问我的任何数据。

标签： javascriptvue.js

Answer 1

我认为问题出在箭头函数=>上：它没有自己的绑定thisor super，不应该用作方法（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/函数/箭头函数）。

要绑定this到方法，请使用function长符号或短符号。

长符号：

const app = new Vue({
    el: '#providers', 
    data: {
        providers: []
    },
    created: function () {
        console.log(this);
    },
})

简写：

const app = new Vue({
    el: '#providers', 
    data: {
        providers: []
    },
    created() {
        console.log(this);
    },
})