Vue의 'this' 키워드 이해

Vue의 'this' 키워드 이해

저는 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();

이렇게 하면 바닐라 자바스크립트로 부동산에 접속할 수 있습니다.배후에서 무슨 일이 벌어지고 있는지 누가 좀 알려주시겠어요?

다음 내용을 읽어주세요.옵션 / 데이터

여기서 "Vue 인스턴스의 데이터 객체"를 얻을 수 있습니다.Vue는 해당 속성을 반복적으로 getter/setter로 변환하여 "reactive"로 만듭니다." 즉,data오브젝트 속성이 새로운 것에 직접 적용됩니다.Vue그러면 다음 사이트에서 속성을 사용할 수 있습니다.this게터나 세터처럼요

Vue에서 프록시를 사용하여 데이터 및 메서드의 Vue 인스턴스 프록시 속성

this특별한 객체입니다.컴파일 시 (네, 컴파일 완료!)data키워드는 사라집니다.모든 속성 및 메서드가 새 개체로 래핑되므로 이제 JS 규칙을 준수할 수 있습니다.

언급URL : https://stackoverflow.com/questions/43505736/understanding-the-this-keyword-in-vue