vue中关于computed的this指向问题

关于computed的this指向

在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下

箭头函数中的this

• 箭头函数内部的this是词法作用域，由上下文确定
• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

vue中的computed

list: () => {
   console.log(this)
}

• 不使用箭头函数

allFigure: function() {
   console.log(this)
},

• 使用get()

allFigure: {
  get() {
    console.log(this);
  }
}

自己的理解

• 在computed中使用箭头函数的话，会导致this指向的不是整个的vueComponent
• 此时使用allFigure: function() {}的形式就可以解决，this指向了vueComponent
• 或者使用对象的形式，用set()、get()方法也不会出现问题

vue实例内部方法的this指向问题

如果是vue实例本身的属性和方法，那么this指向就是vue实例本身，比如methods对象，computed对象，watch对象里的方法，要用方法名(){}写，就代表this指向是vue实例，如果使用()=>{}箭头函数的方式定义方法，则this指向window，因为箭头函数中的this指向的是外部函数的this指向，普通函数的this指向的是它的调用者，而vue中的methods和computed和watch和各种回调钩子，因为他们是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即this

除了这些一级方法，二级方法啥的最好都用箭头函数，因为箭头函数this指向外部函数的this，这些二级函数外部正好是一级函数，一级函数的this正好的vue，所以正好nice.

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。