I have started to learn VueJS from scratch. I am following their official Guide. But I am stuck here:

In this example...

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

..how is it that the message property is directly being accessed without any reference to the data object? If this keyword refers to the current Vue instance, shouldn't the message property be accessed like this: this.data.message?

Consider the following example:

({
  name: "John Doe",
  data: {
    message: "Hello World"
  },
  greet: function(){
    console.log("I am " + this.name);
    console.log("I have a message for you: " + this.data.message); //see here
  }
}).greet();

This is how I would have accessed a property in vanilla javascript. Can someone please make me understand what's going on behind the scenes?

I have started to learn VueJS from scratch. I am following their official Guide. But I am stuck here: https://v2.vuejs.org/v2/guide/#Handling-User-Input

In this example...

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

..how is it that the message property is directly being accessed without any reference to the data object? If this keyword refers to the current Vue instance, shouldn't the message property be accessed like this: this.data.message?

Consider the following example:

({
  name: "John Doe",
  data: {
    message: "Hello World"
  },
  greet: function(){
    console.log("I am " + this.name);
    console.log("I have a message for you: " + this.data.message); //see here
  }
}).greet();

This is how I would have accessed a property in vanilla javascript. Can someone please make me understand what's going on behind the scenes?

• javascript
• vue.js
• vuejs2

• 3 this isn't always bound lexically. It can also be bound with call, apply, or bind, which is likely what VueJS is doing. – castletheperson Commented Apr 19, 2017 at 20:53
• 3 The object you pass to new Vue() and the object it returns are not the same object. You pass it an object it uses to create the Vue. Part of that process is making the data properties, methods, computeds, etc available as properties of the created object. – Bert Commented Apr 19, 2017 at 20:56
• 5 Basically It has proxy that makes this.$data.property accesible as this.property – Belmin Bedak Commented Apr 19, 2017 at 21:00

3 Answers 3

In Vue, Vue instance proxy properties of data and methods by using Proxy

Read this: Options / Data

From that we get "The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it “reactive”." Meaning everything in the data object property is applied directly to the new Vue. This makes thos properties available on this as getters and setters.

this is special object. When compiled, (yes, it is compiled!) the data keyword would disappear. All the properties and methods will wrap to a new object, so this can now conform to the JS rules.