vue js中this引用有时失败的原因

最近在使用vue时碰到一个问题,vue在异步请求数据之后不能刷新页面。

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                arr:[],
                ShowArr:false,
            }
        },
        created:function () {
            this.getData();
        },
        methods:{
            getData(){        
                axios.get("/data").then(function(res）{                 
                  this.arr = res.data;
                });
            },
        }
    });
</script>

在这段代码中this引用实际上是指向的并非是Vue对象，而是发送请求的axios对象，也就是在这段代码执行之后，不能实现arr数据的刷新，要解决问题首先的在axios外部保存Vue的this引用，即：

methods:{
     getData(){    
         var self = this;    
         axios.get("/data").then(function(res）{                 
             self.arr = res.data;
         });
    },
}

或者使用ES6的箭头函数实现上下文穿透

methods:{
     getData(){    
         var self = this;    
         axios.get("/data").then((res）=>{                 
             this.arr = res.data;
         })
    },
}