Vue中this的绑定

　　之前写过一篇文章 ES6与React中this完全解惑 其实Vue也是相同的道理。在Vue的官方文档中提到：

　　不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

　　箭头函数里this是相同的道理，我更推荐MDN里对箭头函数this的说明“箭头功能不会创建自己的this；它使用封闭执行上下文的this值”

this.aaa = 3

new Vue({
  data: {
    a: 1
  },
  created: () => console.log(this)
})

　　这段代码在浏览器执行后，输出的this是window对象。

　　但在现在的项目中，会发现在Vue的mounted里很多地方用了箭头函数，为什么可以？

　　箭头函数中没有this绑定，必须通过查找作用域链来决定其值。如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this;否则，this的值会被设置为全局对象。

 

转载于:https://www.cnblogs.com/zhansu/p/10318306.html