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

	<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) 를 사용할 경우엔 데이터를 어떻게 리턴해야 하는지도 몰라 데이터 후 처리에 대해서 여쭤보고자 합니다.