理解Vue中的“this”关键字

Question

我已经开始从头开始学习VueJS。我正在关注他们的官方指南。但是我被困在这里了：https://vuejs.org/v2/guide/#Handling-User-Input

在这个例子中...

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

..how是否可以直接访问message属性，而不引用data对象？如果this关键字引用当前的Vue实例，是否应该像这样访问message属性：this.data.message

考虑以下示例：

({
  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();

这就是我在vanilla javascript中访问属性的方式。有人能让我明白幕后发生了什么吗？

Answer 1

在Vue中，Vue实例使用Proxy代理数据和方法的属性

Answer 2

请阅读：Options / Data

由此，我们得到“Vue实例的数据对象。Vue将递归地将其属性转换为getter/getter，使其成为”响应式“。”这意味着data对象属性中的所有内容都将直接应用于新的Vue。这使得这些属性在this上可以作为getter和setter使用。

Answer 3

this是一个特殊的对象。编译时(是的，它被编译了！)data关键字将消失。所有的属性和方法都将包装到一个新的对象中，因此这现在可以符合JS规则。