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

解答思路

两者的核心区别在于 this 的确定时机：箭头函数的 this 在定义时就已经确定，继承自外层作用域；普通函数的 this 则要等到调用时，根据调用方式动态确定。

示例代码

// 普通 function 形式的 IIFE：this 由调用方式决定
(async function () {
  var a = await gethomemultidata();
  this.banners = a.data.banner;
  this.recommends = a.data.recommend;
})();

// 箭头函数形式的 IIFE：this 继承自外层作用域（定义时确定）
(async () => {
  var a = await gethomemultidata();
  this.banners = a.data.banner;
  this.recommends = a.data.recommend;
})();

详细说明

• 第一段代码中的匿名函数是普通 function，作为 IIFE 被直接调用（()()）时，其内部的 this 由「调用方式」决定：在非严格模式下直接调用会指向全局对象（浏览器中为 window），严格模式下则是 undefined——通常不会是外层 Vue 组件实例，因此在这段代码里访问 this.banners 很可能不会得到预期结果，甚至报错。
• 第二段代码使用箭头函数包裹 IIFE，箭头函数不会创建自己的 this，它的 this 在函数定义的那一刻，就直接继承了外层作用域（也就是 Vue 组件方法内部）的 this，因此这里的 this.banners 能正确指向 Vue 组件实例，赋值生效。
• 这正是在 Vue 组件方法中编写异步逻辑或回调时，普遍推荐使用箭头函数的原因：可以省去手动 bind(this) 或提前用 var self = this 保存引用的额外步骤。

小结

IIFE 中使用普通函数还是箭头函数，决定了内部 this 的指向规则完全不同：箭头函数「定义时」继承外层 this，普通函数「调用时」由调用方式决定 this；在 Vue 组件中操作组件实例属性时，箭头函数通常更安全可靠。