了解 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 中访问属性的方式。有人可以让我了解幕后发生的事情吗？

原文由 Tanmay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Kermit 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

阅读： 选项/数据

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

原文由 gforce301 发布，翻译遵循 CC BY-SA 4.0 许可协议