Vue中为何将外部this赋值给变量？直接用this无差异是何原因？

嘿，这个问题抓得很准！你没发现差异其实是因为你用了箭头函数，它的this绑定规则和传统普通函数完全不一样，刚好让$this=this这行代码显得“多余”了～

先搞懂$this=this的传统用途 #

在ES6箭头函数出来之前，我们经常会遇到this指向“跑偏”的问题。比如如果把你的代码里的箭头函数换成普通函数：

created () {
  // 假设这里我们不用箭头函数
  setTimeout(function() {
    // 这里的this指向的是window（浏览器环境），不是Vue实例！
    console.log(this); // 输出window
    this.goods = [...] // 这里会报错，因为window没有goods属性
  }, 3000);
}

这时候就必须把外层的this（也就是Vue实例）存到一个变量里，比如$this或者that，这样在内部普通函数里就能访问到正确的Vue实例了：

created () {
  let $this = this; // 把Vue实例存起来
  setTimeout(function() {
    $this.goods = [...] // 这里用$this就能访问到Vue实例了
  }, 3000);
}

为什么你的代码里直接用this也没问题？ #

因为你在setTimeout里用了箭头函数！箭头函数的this不会自己绑定新的对象，而是继承自外层作用域的this。在你的created钩子函数里，外层的this就是Vue实例，所以箭头函数里的this自然也指向Vue实例，这时候用this和用提前存好的$this效果完全一致。

你可以自己测试一下，在箭头函数里打印this：

created () {
  let $this = this;
  setTimeout(() => {
    console.log(this === $this); // 输出true！说明两者指向同一个Vue实例
    this.goods = [...]
  }, 3000);
}

总结一下 #

• 当你在普通函数里嵌套函数时，this会丢失原指向，这时候需要$this=this来保留外层的this；
• 当你用箭头函数时，箭头函数会自动继承外层作用域的this，所以不需要额外存变量；
• 你的代码刚好属于第二种情况，所以$this=this这行代码可以删掉，直接用this就行～

内容的提问来源于stack exchange，提问作者wl.GIG