Vue.js => Использование «this» в Vue

Вступление

Одной из наиболее распространенных ошибок, которые мы обнаруживаем в коде Vue на StackOverflow, является неправильное использование this . Наиболее распространенные ошибки обычно падают в двух областях, используя this в обратных вызовах для обещаний или других асинхронных функций и используя функции стрелок для определения методов, вычисленных свойств и т. Д.

НЕПРАВИЛЬНО! Использование «this» в обратном вызове внутри метода Vue.

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomethingAsynchronous(){
      setTimeout(function(){
        // This is wrong! Inside this function,
        // "this" refers to the window object.
        this.foo = "baz";
      }, 1000);
    }
  }
})

НЕПРАВИЛЬНО! Использование «этого» внутри обещания.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    $.getJSON("http://swapi.co/api/people/", function(data){
      // Again, this is wrong! "this", here, refers to the window.
      this.people = data.results;
    })
  }
})

ПРАВО! Используйте закрытие для захвата "этого"

Вы можете захватить правильное this с помощью закрытия .

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    // Before executing the web service call, save this to a local variable
    var self = this;
    $.getJSON("http://swapi.co/api/people/", function(data){
      // Inside this call back, because of the closure, self will
      // be accessible and refers to the Vue object.
      self.people = data.results;
    })
  }
})

ПРАВО! Используйте bind.

Вы можете связать функцию обратного вызова.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted:function(){
    $.getJSON("http://swapi.co/api/people/", function(data){
      this.people = data.results;
    }.bind(this));
  }
})

ПРАВО! Используйте функцию стрелки.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    $.getJSON("http://swapi.co/api/people/", data => this.people = data.results);
  }
})

Внимание! Функции Arrow - это синтаксис, введенный в Ecmascript 2015. Он еще не поддерживается, но все современные браузеры, поэтому используйте его только в том случае, если вы нацеливаете браузер, который, как вы знаете, поддерживает его, или если вы компилируете свой javascript до синтаксиса ES5, используя что-то вроде babel ,

НЕПРАВИЛЬНО! Используя функцию стрелки для определения метода, который ссылается на «это»,

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    // This is wrong! Arrow functions capture "this" lexically
    // and "this" will refer to the window.
    doSomething: () => this.foo = "baz"
  }
})

ПРАВО! Определить методы с типичным синтаксисом функции

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomething: function(){
      this.foo = "baz"
    }
  }
})

Кроме того, если вы используете компилятор javascript или браузер, поддерживающий Ecmascript 2015

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomething(){
      this.foo = "baz"
    }
  }
})

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

Vue.js
Использование «this» в Vue

Поиск…