Javascript 使用Vue方法时，我不能使用；这"；访问数据时

这是我的密码：

let app = new Vue({
    el: '#app',
    data: {
        groups: [],
    },

    methods: {
        loadGroups(){
            axios.get('/api/groups')
                .then(function (response) {
                    // handle success
                    app.groups = response.data; //The important line
                });
        },
        addGroup(){
            this.loadGroups();
            console.log(1);
        }
    },

---

在

loadGroups

方法中，我使用

app.groups=response.data

很好，但我更愿意使用

this.groups=response.data

或类似的东西，但我不能这样做，因为

这个

指的是窗口，而不是Vue实例。我怎样才能让自己看起来更友好呢？

这里有三种方法，最现代的方法是：

loadGroups(){
    axios.get('/api/groups')
        .then(response => {   // for arrow functions `this` is just another variable
            // handle success
            this.groups = response.data;
        });
}

loadGroups(){
    axios.get('/api/groups')
        .then(function (response) {
            // handle success
            this.groups = response.data;
        }.bind(this));     // binding `this` to the function makes it keep `this`
}

loadGroups(){
    var that = this;        // old style approach with a proxy variable
    axios.get('/api/groups')
        .then(function (response) {
            // handle success
            that.groups = response.data;
        });
}

您的

this

丢失的原因是回调没有作为方法调用。当使用

function

关键字（不是箭头）定义函数，并从对象的属性（即某处有一个点，或至少是方括号）调用它时，就会发生方法调用。该对象称为“接收器”，并被分配给

此

const obj = {
  not_method: x => x * 2,
  method: function(x) { return x*2; }
}
obj.not_method()    // not a method call (arrow); `this` is unaffected
f = obj.method; f() // not a method call (not property); `this` is `global` or `window`
obj.method()        // method call; `this` is `obj`
obj['method']()     // still a method call; `this` is obj

axios.get

不关心

这个

；它接收一个参数，例如作为

回调

，并调用它：

回调（响应）

；由于

回调

中没有点或方括号，因此它不是方法调用，

此

是全局范围

第一段代码将函数更改为箭头函数。根据其定义，箭头函数完全忽略此，将其视为任何其他变量。因此，

此

将被函数关闭，您可以从闭包访问它在闭包外的值

第二段代码使用

Function.prototype.bind

强制函数将

此

赋值给我们选择的值。它还可以填充一些参数，但我们不使用它，只使用接收器

---

第三段代码模拟了第一段代码，当时箭头函数还没有出现。我们将

this

的值分配给另一个变量，它不像

this

那样神奇，因此将通过正常机制在闭包中捕获。

以下是三种方法，最新的方法是：

loadGroups(){
    axios.get('/api/groups')
        .then(response => {   // for arrow functions `this` is just another variable
            // handle success
            this.groups = response.data;
        });
}

loadGroups(){
    axios.get('/api/groups')
        .then(function (response) {
            // handle success
            this.groups = response.data;
        }.bind(this));     // binding `this` to the function makes it keep `this`
}

loadGroups(){
    var that = this;        // old style approach with a proxy variable
    axios.get('/api/groups')
        .then(function (response) {
            // handle success
            that.groups = response.data;
        });
}

您的

this

丢失的原因是回调没有作为方法调用。当使用

function

关键字（不是箭头）定义函数，并从对象的属性（即某处有一个点，或至少是方括号）调用它时，就会发生方法调用。该对象称为“接收器”，并被分配给

此

const obj = {
  not_method: x => x * 2,
  method: function(x) { return x*2; }
}
obj.not_method()    // not a method call (arrow); `this` is unaffected
f = obj.method; f() // not a method call (not property); `this` is `global` or `window`
obj.method()        // method call; `this` is `obj`
obj['method']()     // still a method call; `this` is obj

axios.get

不关心

这个

；它接收一个参数，例如作为

回调

，并调用它：

回调（响应）

；由于

回调

中没有点或方括号，因此它不是方法调用，

此

是全局范围

第一段代码将函数更改为箭头函数。根据其定义，箭头函数完全忽略此，将其视为任何其他变量。因此，

此

将被函数关闭，您可以从闭包访问它在闭包外的值

第二段代码使用

Function.prototype.bind

强制函数将

此

赋值给我们选择的值。它还可以填充一些参数，但我们不使用它，只使用接收器

---

第三段代码模拟了第一段代码，当时箭头函数还没有出现。我们将

this

的值赋给另一个变量，它不像

this

那样神奇，因此将通过正常机制在闭包中捕获。

在回调后调用

.bind（this）

或将其设为箭头函数。您是否尝试使用

数据：{return{}

和

this.groups

？Ref:回调后调用

.bind（this）

或将其设置为箭头函数您是否尝试过将

数据：{return{}}

与

this.groups

一起使用？我明白了，现在，我一直在用正则函数代替方法，这很有道理，谢谢！我明白了，现在，我一直在使用正则函数而不是方法，这很有意义，谢谢！