엑시오스 데이터 바인딩 처리에 대해서 여쭤봅니다.

JavaScript Vue.js
1 
	<div id="app">
		<button v-on:click="fetchData">get data</button>
		<p>데이터 바인드</p>
		<p>{{id}} {{name}}</p>
		<div v-for="result in results">
			<p>{{result.id}} {{result.name}}</p>
		</div>
	</div>

data: { //변수 선언.
				results:[],
				id:'',
				name:''
			},
			methods : {
				fetchData: function () {  

					axios.get('https://jsonplaceholder.typicode.com/users/')
					.then(function(response) {
						//this.results = response.data;
						console.log(response.data);
						this.results = response.data;
						return this.id = response.data[0].id;
					});

데이터 받을 때 위의 문법처럼 하면
console.log(response.data); 여기서 데이터 확인이 가능한데,
response 데이터를 리턴 하지 못합니다. 그런데 아래 코드

data: { //변수 선언.
				results:[],
				id:'',
				name:''
			},
			methods : {
				fetchData: function () {  
					axios.get('https://jsonplaceholder.typicode.com/users/')
					**.then((response) => {**
						//this.results = response.data;
						console.log(response.data);
						this.results = response.data;	
					});

then 처리를 화살표 함수로 바꾸게 되면 정상적으로 리턴이 되어

뿌려지게 되는데요,
어떤 차이인지 모르겠습니다. .then(function(response) 를 사용할 경우엔 데이터를 어떻게 리턴해야 하는지도 몰라 데이터 후 처리에 대해서 여쭤보고자 합니다.

2

결론부터 말하면 this.results = ... 에서 this가 콜백 함수 종류에 따라서 다르게 해석됩니다.

아래와 같이 then 안에 콜백 함수를 걸어주는데요

.then(callback)

이 콜백 함수가 일반 함수인 경우 이 안에서 this는 VueComponent 인스턴스를 나타내는 참조가 아닙니다.

                                       .then((response) => {
						console.log("[THIS]", this); // this를 찍어보시오.
						this.results = response.data;	
					})

콜백 함수 안에서 this가 vue component를 참조하게 하려면 화살표함수(arrow function)으로 코딩해야 합니다.

고상한 말로 this를 원하는 context에 바인딩 시키는 방법이라고 하는데 기존의 함수가 위와같은 불편함이 있어서 이후에 arrow function 문법이 나오게 되었습니다.