es6 - 关于vue.js中箭头函数this的指向？

问题描述

问 题

1、描述我的问题
发现箭头函数的this指向与普通函数的不一样，具体看代码。我的问题是怎么样才能让箭头函数的this能获取到VM。
2、我的代码：
这里不详细叙述，以vue的created函数为例

//箭头函数
  created:()=>{
    console.log(this)      //这里获取不到VM
  }


//普通函数
   created:function(){
    console.log(this)       //这里获取到VM
   }

3.vue文档中关于钩子函数this指向的解释：

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义。

4、问题截图
①获取不到vm对象：

②正常：

请问各位大神：要保证能访问到VM对象，箭头函数里面应该怎么写？

解决方案

这个方式是可以正常取到 this 的。

created () {
    // do something
    console.log(this)
}

这篇关于es6 - 关于vue.js中箭头函数this的指向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！