Vue methods 用箭头函数取不到 this

https://segmentfault.com/q/1010000007225390

Vue methods 用箭头函数取不到 this

vue.js

 

const App = new Vue({
    el: 'body',

    methods: {
        foo: () => {
            console.log(this) // undefined
        }
    }
})

const App = new Vue({
    el: 'body',

    methods: {
        foo () {
            console.log(this) // Vue instance
        }
    }
})

对 Vue 不熟，请教一下各位大神这是什么原因

解释：

首先，看文档 http://cn.vuejs.org/api/#methods

实例方法。实例可以直接访问这些方法，也可以用在指令表达式内。方法的 this 自动绑定到实例。
在vue的methods的this是自动绑定的

然后见代码：https://github.com/vuejs/vue/...

function initMethods (vm: Component) {
  const methods = vm.$options.methods
  if (methods) {
    for (const key in methods) {
      vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
      if (process.env.NODE_ENV !== 'production' && methods[key] == null) {
        warn(
          `method "${key}" has an undefined value in the component definition. ` +
          `Did you reference the function correctly?`,
          vm
        )
      }
    }
  }
}

你用箭头函数，会返回一个绑定当前执行上下文中的this，而且这个this，不可再切换更改了。你此处绑定的 this 是当前函数体内的this,严格模式下为undefined;

methods

• 类型：{ [key: string]: Function }

• 详细：

  methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

  注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

• 示例：

  var vm = new Vue({
    data: { a: 1 },
    methods: {
      plus: function () {
        this.a++
      }
    }
  })
  vm.plus()
  vm.a // 2