What does this mean in vuejs

The meaning of this in vuejs: 1. In a vue component or instance, this represents the Vue instance that calls it; 2. In a callback function, this represents the parent component; 3. In an arrow function, this represents the definition The object in which it is located is the host object.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

This variable in Vuejs

1 In the vue component

all life inVue Cycle hook methods (such as beforeCreate, created, beforeMount, mounted, beforeUpdate , updated, beforeDestroy and destroyed) use this, this to refer to the that called it Vue instance, that is (new Vue)

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
  methods: {
	plus: function () {
      this.a++
    }
  }
});

vue component or instance, whether it is the life cycle hook function created or Custom function plus, this among them refers to the current vue instance

2 callback function

methods: {
     searchLocations: function() {
         var address = this.search
         var geocoder = new window.google.maps.Geocoder()
         geocoder.geocode({
             address: address
         }, function(results, status) {
             if (status === window.google.maps.GeocoderStatus.OK) {
                 this.buscarLojas(results[0].geometry.location)
             }
         })
     },
     buscarLojas: function(center) {
         console.log(center)
     }
 }

At this time, the callback function function(results, status) will redirect this to the anonymous object (analogyjava anonymous class), so this refers to the parent component, and executing this.buscarLojas will report an error that the function cannot be found

3 Arrow function

##Arrow function does not have its own this, its this is Inherited; Default points to the object (host object) when it is defined, rather than the object when executed

methods: {
    searchLocations: function () {
      var address = this.search
      var geocoder = new window.google.maps.Geocoder()
      geocoder.geocode({address: address}, (results, status) => {
        if (status === window.google.maps.GeocoderStatus.OK) {
          this.buscarLojas(results[0].geometry.location)
        } else {
          alert(address + ' not found')
        }
      })
    },
    buscarLojas: function (center) {
      console.log(center)
    },
   group1:()=>{
 //ES6的箭头函数写法，箭头函数没有自己的this,它的this事继承来的，指向在定义它时所处的宿主对象，在这里this指向window。
         this.......
   },
}

Arrow function is bound to parent context, so this will point to the parent component. For the problem in case three, the callback function will function is changed to an arrow function, which will redirect this from the anonymous object to the external vue component

Related recommendations: "

vue .js tutorial》

The above is the detailed content of What does this mean in vuejs. For more information, please follow other related articles on the PHP Chinese website!