vue中this相关的问题，求解答!

Question

gethomemultidata是一个封装好的axios，我想通过async和await拿到请求到的数据并分别赋值给组件中的banners和recommends：

data() {
        return {
            banners: [],
            recommends:[]
        }
    },
    components: {
        navbar
    },
    created() {
         (async function () {
            var a = await gethomemultidata() 
            this.banners = a.data.banner
            this.recommends = a.data.recommend
         })()   
        
         
         
    },

发现浏览器报错了，好像是通过this获取不到banners：

如果把async换到created前面就能获取到banners，但是把async放到created前面会不会不太好？：

data() {
        return {
            banners: [],
            recommends:[]
        }
    },
    components: {
        navbar
    },
     async created() {
         
            var a = await gethomemultidata() 
            this.banners = a.data.banner 
            this.recommends = a.data.recommend
             console.log(this.banners);
        
         
         
    },

浏览器成功打印banners:

而且我看视频中通过then的方式也可以成功赋值：

一直搞不太懂这个this相关的东西，希望指点一下！_(:з」∠)_

Answer 1

 (function () {
            var a = await gethomemultidata() 
            this.banners = a.data.banner
            this.recommends = a.data.recommend
         })()   

和

 (() => {
            var a = await gethomemultidata() 
            this.banners = a.data.banner
            this.recommends = a.data.recommend
         })()   

箭头函数的this是定义时，普通function是调用时

Answer 2

我都是直接放到created前面，我觉得比新建 function 有好多了。
只要是function就会新建作用域，this 指向就有可能变，需要注意