data (Vue2)에 대하여

새로운 컴포넌트 인스턴스 생성 시 자체 state를 가지는 경우, data 함수를 호출한다.

data 메서드는 하나의 객체만을 반환한다. 반환된 객체는 $data로 저장된다.

 

만약 아래와 같이 data 메서드를 정의하고 $data를 확인해본다면,

data() {
	return {
		num: this.number,
	};
}

console.log(this.$data);
console.log(this.num);

 

아래와 같은 결과를 얻게 된다.

 

 

결과를 보면 this.$data가 Proxy인 것을 확인할 수 있다.

Vue는 주어진 객체의 모든 프로퍼티를 proxy로 변환한다. 이 proxy는 es6 이상에서만 지원하는 기능이다.

따라서 IE에서도 Vue3를 사용할 수 있게 하기 위해 Object.defineProperty(Vue2의 반응성 방식)를 사용하는 버전을 제공한다.

 

💡 Object.defineProperty 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후 해당 객체를 반환한다.

Object.defineProperty를 통해 할당한 속성은 기본적으로 불변하며 열거 불가능하다는 특징이 있다.

프록시 개체를 사용하면 해당 객체에 대한 기본 작업을 가로채고 재정의할 수 있는 다른 객체에 대한 프록시를 만들 수 있다.

프록시 객체를 사용하면 원래 개체 대신 사용할 수 있지만 속성 가져오기, 설정 및 정의와 같은 기본 객체 작업을 재정의할 수 있는 객체를 만들 수 있다.

프록시 객체는 일반적으로 속성 액세스를 기록하고, 입력의 유효성을 검사하고, 형식을 지정하거나, 삭제하는 데 사용된다. (프록시를 사용하여 상태 변화를 감지하는 것 같은데 원리 이해중)

참고자료: vue3 반응형 동작 원리 이해하기