Proxied properties

You may have noticed that ourescapeKeyListenermethod can refer tothis.modalOpen. Shouldn't it bethis.methods.modalOpen?

When a Vue instance is constructed, it proxies any data properties, methods, and computed properties to the instance object. This means that from within any method you can refer tothis.myDataProperty,this.myMethod, and so on, rather thanthis.data.myDataPropertyorthis.methods.myMethod,as you might assume:

var app = new Vue({
  data: { 
    myDataProperty: 'Hello'
  },
  methods: {
    myMethod: function() {
      return this.myDataProperty + ' World';
    }
  }
});

console.log(app.myMethod());
// Output: 'Hello World'

You can see these proxied properties by printing the Vue object in the browser console:

Figure 2.12. Our app's Vue instance

Now the simplicity of text interpolations might make more sense, they have the context of the Vue instance, and thanks to proxied properties, can be referenced like{{ myDataProperty }}.

However, while proxying to the root makes syntax terser, a consequence is that you can't name your data properties, methods, or computed properties with the same name!