Vue.js (4) - 프록시

Vue Proxy

전체 시리즈에서, 우리는 data 프로퍼티, methods, computed 프로퍼티, 그리고 watchers를 직접적으로 prefix 없이 접근할 수 있는지 살펴봤습니다. 지금부터는 마지막으로 화면 뒤에서 발생하는 일에 대해서 살펴봅니다.

첫번째로, 몇몇 프로퍼티가 $ 표시로 prefix 되어있는지 주목해주세요. 이것은 우리가 접근할 수 있는 Vue 프로퍼티들이고, 이 시리즈중에서 나중에 확인해볼 것들입니다.

$options 프로퍼티를 보면, 우리들의 data, computed 프로퍼티, methods 등등을 포함하고 있습니다. 여기에서 우리는 computed 프로퍼티와 method를 확인할 수 있습니다. data 프로퍼티는 function이므로, data를 직접적으로 여기서 확인할 수는 없습니다. 이유는 나중에 살펴보도록 하겠습니다.

그 밑에는 Vue instance의 상위 레벨에서 사용 가능한 아이들입니다. 비록 우리는 그들을 nested Objectes로 정의했지만요. 이것은 Vue가 자동적으로 우리의 편의를 위해 도와주는 도구들입니다. 이것들은 가장 이해하기 쉬운 아이들입니다. 어떻게 getter과 setters가 자동적으로 우리의 각각의 data 프로퍼티에 추가되었는지를 확인해보십시오.

이것들은 소위말하는 proxy getters와 proxy setters 입니다. 마우스를 그 위에 올리게 되면, 이것은 _data Object 안에서 key의 값을 반환 하는데, Vue 가 내부적으로 사용하는 프로퍼티입니다. 만약 이 Object를 찾았다면, functions는 proxy functions가 아니라는 것을 빼면 방금 본것과 똑같은것을 가지고 있다는 것을 볼 수 있습니다. 소위말하는 reactive (반응적) functions 이죠. 기본적으로 Vue는 이 functions를 언제 우리가 값을 접근, 수정하는지 추적하기위해 사용할 수 있습니다.

지금부터 중요하게 알아야 할 것은, Vue는 몇몇 proxy functions를 Vue instacne의 최상위에 노출한다는 것입니다. 간단하게 reactive functions 를 호출하는것을 말합니다. 간편하게 data, methods 등에 더 쉽게 접근할 수 있도록 해줍니다.

data 프로퍼티같은것을 등록할 때, Vue.js는 proxy를 등록합니다. 그건 reactive getter나 setter function을 호출하는데, Vue,js를 우리가 data를 만들 때 어떤 변화에도 대응하게 해줄 수 있다는것을 의미합니다. 이제 proxy functions는 정말 그저 반응적 function 을 위한 proxy일 뿐이라는것을 보여드리겠습니다. 우리는 Vue가 내부적으로 사용하는 _data 프로퍼티를 볼것인데, "바깥에서만 접근할 수 있는" $data 프로퍼티만 있습니다.

  console.log(vm.$data.message)

이런 경우, $data 프로퍼티의 사용이 필요 없을 것이고, proxied data 프로퍼티를 사용합니다.

  console.log(vm.message)

이 두 라인의 값이 정확히 똑같다는것을 알 수 있습니다. 두번 째 라인은 Vue가 자동적으로 우리에게 사용가능하게 만들어준 편린한 proxy function 이며, data 프로퍼티, methods에 접근할 수 있는 일반적인 방법입니다.

Vue가 data, computed 프로퍼티, method 등등 을 가지고 있기 때문에, 그리고 proxy 프로퍼티를 Vue instance에 최상위 레벨에 추가하기 때문에, name이 중복되어 충돌하는 일이 없도록 주의해야합니다. 이 objects안에서 모든 키는 특별해야합니다.

그래서 만약 message라는 이름의 data 프로퍼티가 있다면, computed 프로퍼티나 method에 같은 이름이 없도록 주의해야합니다. 만약 여러분이 동일한 이름을 사용하게 된다면, console에 warning이 찍히는 것을 볼 수 있습니다.

  console.log(data.message === vm.message);
  console.log(data === vm.$data);

만약 우리가 data Object를 변수로써 정의하고, Vue instance로 전달했다면, 우리는 message 프로퍼티와 data 변수를 비교할 수 있습니다.

출처 codingexplained - proxing