Vue.js => Używanie „tego” w Vue

Wprowadzenie

Jednym z najczęstszych błędów, które znajdujemy w kodzie Vue na StackOverflow, jest niewłaściwe użycie this . Najczęstsze błędy mieszczą się zasadniczo w dwóch obszarach, wykorzystując this w wywołaniach zwrotnych dla obietnic lub innych funkcji asynchronicznych i używając funkcji strzałek do zdefiniowania metod, obliczonych właściwości itp.

ŹLE! Używanie „this” w wywołaniu zwrotnym w metodzie 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);
    }
  }
})

ŹLE! Używanie „tego” w obietnicy.

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;
    })
  }
})

DOBRZE! Użyj zamknięcia, aby uchwycić „to”

Możesz uchwycić poprawne this za pomocą zamknięcia .

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;
    })
  }
})

DOBRZE! Użyj powiązania.

Możesz powiązać funkcję zwrotną.

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));
  }
})

DOBRZE! Użyj funkcji strzałki.

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

Uwaga! Funkcje strzałek to składnia wprowadzona w Ecmascript 2015. Nie jest jeszcze obsługiwana, ale we wszystkich nowoczesnych przeglądarkach, więc używaj jej tylko wtedy, gdy celujesz w przeglądarkę, o której wiesz , że ją obsługuje, lub jeśli kompilujesz javascript do składni ES5 za pomocą czegoś takiego jak babel .

ŹLE! Użycie funkcji strzałki do zdefiniowania metody odnoszącej się do „tego”

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"
  }
})

DOBRZE! Zdefiniuj metody z typową składnią funkcji

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

Alternatywnie, jeśli używasz kompilatora javascript lub przeglądarki obsługującej 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

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

Vue.js
Używanie „tego” w Vue

Szukaj…