[Vue] arrow function 사용 시 주의 사항

 

 

Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

 

각 Vue 구성 요소 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 수명 주기 후크라는 기능도 실행하여 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다.

 

 

For example, the created hook can be used to run code after an instance is created:

 

예를 들어 created 인스턴스가 생성 된 후 코드를 실행하는 데 후크를 사용할 수 있습니다.

new Vue({
	data: {
    	a: 1
    },
    created: function() {
    	// 'this' points to the vm instance
        console.log('a :: ', this.a) // "a :: 1"
    }
})

 

 

There are also other hooks which will be called at different stages of the instance’s lifecycle, such as mounted, updated, and destroyed. All lifecycle hooks are called with their this context pointing to the Vue instance invoking it.

 

인스턴스 수명주기의 여러 단계에서 호출되는 다른 후크 (ex. mounted, updated, destoryed)도 있습니다.

모든 수명주기 후크는 this context를 호출하는 Vue 인스턴스를 가르키는 context로 호출됩니다.

 

---

💡예시코드

new Vue({
	el: '#app',
	data: {
    	a: 1
    },
	created() => console.log(this.a),
    methods: {
    	methodA: () => {
        	console.log(this == window);
            this.methodB();
        },
        methodB: function() {
            this.methodA();
        },
        methodC() {
        	this.methodA();
        }
    }
})

 

// ...
created() => console.log(this.a) 
// TypeError: Cannot read properties of undefined (reading 'a')

console.log(this.a) 에서 this는 vue instance가 아닌 window를 가르키기 때문에 'a' 를 찾을 수 없다.

* mounted, updated, destroyed 도 동일하다.

 

// ...
methods: {
    methodA: () => {
        console.log(this == window); // true
        this.methodB(); // 오류
    },
    methodB: function() {
        this.methodA(); // 정상
    },
    methodC() {
        this.methodA(); // 정상
    }
}

화살표 함수로 선언된 methodA에서의 this는 window를 가르키기 때문에 this.methodB() 호출 시 에러가 발생한다. methodB와 methodC에서의 this는 vue instance를 가르키기 때문에 정상 작동 한다.

 

 

 

 

📌 참고자료

 

VUE 공식사이트 ::: Lifecycle Hooks