理解 Vue 中的“this”关键字答案

【问题标题】：Understanding the 'this' keyword in Vue理解 Vue 中的“this”关键字
【发布时间】：2017-04-19 20:46:05
【问题描述】：

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

【问题讨论】：

this 并不总是在词法上绑定。它也可以与call、apply或bind绑定，这很可能是VueJS正在做的事情。
你传递给new Vue()的对象和它返回的对象不是同一个对象。您将它用于创建 Vue 的对象传递给它。该过程的一部分是使数据属性、方法、计算对象等可用作创建对象的属性。
基本上它具有使this.$data.property 可访问为this.property 的代理

标签： javascript vue.js vuejs2

【解决方案1】：

阅读：Options / Data

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

【讨论】：

如果您还包括有关“方法”选项的文档将会很有帮助，目前是：Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their this context automatically bound to the Vue instance.
你是对的，你的回答对我很有帮助。我只添加了评论，以防您想用其他信息更新您的答案。但这显然取决于您。

【解决方案2】：

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

【讨论】：

这对 Vue 3 是正确的，但对 Vue 2 根本不正确。

【解决方案3】：

this 是特殊对象。编译后（是的，它已编译！）data 关键字将消失。所有的属性和方法都会包装成一个新的对象，所以现在可以符合 JS 规则了。

【讨论】：

"所以现在可以符合 JS 规则"。这里没有魔法。你不需要预处理或编译来实现这一点，这在 JavaScript 中一直是可能的。
这就是 vue 引擎的工作方式，我的意思是 vue 引擎或库对其进行预处理。如果不编译（或者翻译，浏览器怎么知道呢