Vue methods 用箭头函数取不到 this

Question

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 不熟，请教一下各位大神这是什么原因

Answer 1

首先，看文档 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;

Answer 2

http://vuejs.org/api/#methods
文档中有描述

   Note that you should not use an arrow function to define a method (e.g. plus: () => this.a++). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.a will be undefined.

Answer 3

如果是要获取调用该方法的元素可以用官方文档提供的方法：
methods: {

greet: function (event) {
  // 方法内 `this` 指向 vm
  alert('Hello ' + this.name + '!')
  // `event` 是原生 DOM 事件
  alert(event.target.tagName)
}

Answer 4

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

http://es6.ruanyifeng.com/#do...箭头函数