了解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('')
    }
  }
})

..如何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 将递归地将其属性转换为 getter/setter 以使其“反应式”。这意味着data对象属性中的所有内容都直接应用于新的Vue. 这使得这些属性this可用作 getter 和 setter。

Answer 2

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