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中，使用Proxy

的Vue实例代理数据和方法属性

Answer 2

阅读本文：Options / Data

从中我们得到＆＃34; Vue实例的数据对象。 Vue将递归地将其属性转换为getter / setter以使其“被动”。＆＃34;意味着public function sendResetLinkEmail(Request $request) { $this->validate($request, ['email' => 'required|unique:user_emails,email']); // We will send the password reset link to this user. Once we have attempted // to send the link, we will examine the response then see the message we // need to show to the user. Finally, we'll send out a proper response. $response = $this->broker()->sendResetLink( $request->only('email') ); return $response == Password::RESET_LINK_SENT ? $this->sendResetLinkResponse($response) : $this->sendResetLinkFailedResponse($request, $response); }对象属性中的所有内容都直接应用于新data。这使得Vue上的thos属性可用作getter和setter。

了解Vue中的'this'关键字

2 个答案: