javascript - 理解Vue中的 'this'关键字

Question

我已经开始从零开始学习 VueJS。我正在关注他们的官方指南。但我被困在这里:https://v2.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

阅读:Options / Data

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