[Vuejs] 화살표 함수사용의 편리성

 

 

 

화살표함수를 적용안하였을 때, Vue객체 사용을 위해서 this를 비동기함수 호출전 바인딩하여 사용해야함.

그렇지 않고 this를 비동기 함수안에서 바로 호출하면 아래와 같이 'undefined'값이 찍히는 것을 확인 가능

    created(){
        var vm = this;
        console.log('호출전: ', this);
        fetchNewsList()
             .then(function(response){
                 console.log('호출 후:' , this);
                 //바로 this를 사용하면 this가 Vue객체를 가리키지 않기 때문에 콜백시에는 따로 지정해야함.. 
                 vm.users = response.data
             })
             .catch(function(error){
                 console.log(error);
             })
    },

 

 

화살표함수를 적용하였을 때, Vue객체 사용을 위해서 this를 비동기함수 호출전 바인딩하지 않고도

 this를 비동기 함수안에서 바로 호출가능

  created(){
    var vm = this;
     console.log('호출전: ', this);
    fetchJobsList()
      .then(response => {
                console.log('호출후: ', this);
                vm.jobs = response.data;}
                )
      .catch(error => console.log(error))
  }