Vue.js 2 Design Patterns and Best Practices

How Vue handles 'this'

You may have noticed up to this point that we're able to reference values inside of our data, methods, and other objects using this syntax, but the actual structure of our instance is this.data.propertyName or this.methods.methodName; all of this is possible due to the way Vue proxies our instance properties.

Let's take a very simple Vue application that has one instance. We have a data object that has a message variable and a method named showAlert; how does Vue know how to access our alert text with this.message?

<template> <button @click="showAlert"> Show Alert</button></template><script>export default { data() {  return {   message: 'Hello World!',  }; }, methods: {  showAlert() {   alert(this.message);  }, },};</script> ...