[Vue.js] 뷰 인스턴스에서의 this 키워드(data)

안녕하세요. 오늘은 Vue.js의 인스턴스에서 this 키워드에 관하여 포스팅해보고자 합니다.

 

일반적으로 자바스크립트에서의 this키워드는 다음과 같이 사용됩니다.

var obj = {
	num : 10,
    plusNum : function(){
    	this.num++;
    }
}
obj.plusNum();
console.log(obj.num); //11

obj이라는 변수에 num과 num에 +1을 더하는 plusNum이라는 함수를 정의하였을 때, num++하는 부분에서 this 키워드가 사용되는 것을 볼 수 있을 것입니다.

 

자바스크립트에서는 일반적으로 객체의 인스턴스를 가져올 때 this키워드를 사용합니다. this를 내부에서 obj 변수처럼 활용하는 것이지요.

 

하지만 Vue 인스턴스를 생성했을 때는 약간 다르게 사용됩니다.

 

var vm=  new Vue({
	el: '#app',
	components:{
		'app-header': appHeader,
		'app-content': appContent
	},
	methods: {
		logText : function(){
			console.log('pass');
		},
		increaseNum: function(){
			this.num++;
		}
	},
	data : {
		num : 10
	}
});

vue인스턴스를 vm이라는 변수에 담았습니다. this키워드를 찾아보면 increaseNum이라는 함수를 정의한 곳에서 사용됩니다. 

 

data에는 num이라는 값이 10으로 정의되어 있습니다.

 

해당 뷰 인스턴스는 간단히 설명하자면 버튼을 클릭했을 때 increaseNum 이벤트 함수가 발생하여 data영역의 num을 +1 증가시켜줍니다. 

 

하지만 위의 자바스크립트 this키워드내에서는 객체의 즉, vm 내에 있는 프로퍼티들 한정으로 접근했습니다. 

 

그럼 위의 Vue 인스턴스를 console로 출력해보겠습니다.

 

뷰 인스턴스가 생성이되고 vm 변수에 할당된 뷰 객체의 모습입니다.

 

자세히 보면 분명히 data에 정의한 num 변수값이 Vue 객체 바깥쪽에 선언된 것을 볼 수 있습니다.

 

이점에서 알 수 있는 것은 Vue 인스턴스를 생성할 때 파라미터로 전달되는 익명객체는 일정한 가공을 거쳐서 인스턴스화되고 this키워드를 통해서 직접적으로 data 영역에 있는 변수값에 접근할 수 있게 되었다는 것입니다.

 

자바스크립트에서의 접근방법이 틀리지는 않았다는 것을 알 수 있습니다.