Vue.js that과 prototype

Question

vue.js의 that과 Vue.prototype에 대해서 궁금하게 생겨서 들어오게 되었습니다.1. Vue.prototype을 통해서 등록된 메소드는 this.$형태로 사용하게 됩니다.2. let that &#61; this; 형태의 that을 쓰는 의미는 호출하는 컴포넌트를 유지하기위해서 사용하는 것으로 알고 있습니다.그런데 만약 that으로 사용하던 메소드를 Vue.prototype을 통해서 전역적으로 등록하게 되면 더 이상 호출하는 컴포넌트는 상관없이(prototype에 등록이 될테니) 사용이 가능한지 궁금합니다.

하태연 · Answer

this를 that으로 세팅하는 경우는 주로 콜백 함수나 화살표 함수를 사용하기 이전의 JavaScript에서 컨텍스트(this) 바인딩 문제를 해결하기 위해 사용되었습니다. 대표적인 상황들은 다음과 같습니다:1. 콜백 함수에서 원래의 Vue 인스턴스 컨텍스트 유지```javascriptexport default { data() { return { message: 'Hello' } }, methods: { someMethod() { var that = this; // this를 that으로 저장 setTimeout(function() { console.log(that.message); // 원래의 Vue 컨텍스트 접근 }, 1000); } }}```2. 비동기 API 호출 시 컨텍스트 유지```javascriptmethods: { fetchData() { var that = this; axios.get('/api/data') .then(function(response) { that.result = response.data; // Vue 인스턴스의 데이터 접근 }); }}```현대 JavaScript(ES6+)에서는 이런 방식 대신 아래와 같은 방법들로 대체됩니다:1. 화살표 함수 사용```javascriptmethods: { someMethod() { setTimeout(() => { console.log(this.message); // 화살표 함수는 상위 컨텍스트의 this를 그대로 사용 }, 1000); }}```2. .bind() 메서드 사용```javascriptmethods: { someMethod() { setTimeout(function() { console.log(this.message); }.bind(this), 1000); }}```이 패턴은 주로 ES6 이전의 JavaScript에서 많이 사용되었으며, 현재는 화살표 함수나 .bind() 메서드로 대체되고 있습니다. that = this 패턴은 클로저와 비동기 콜백에서 원래의 컨텍스트를 유지하기 위한 클래식한 해결 방법이었습니다.

Vue.js that과 prototype

1개의 답변

Q&A 목록