Vue 中的 this

this

普通函数的 this

普通函数的 this 是由动态作用域决定，它总指向于它的直接调用者。具体可以分为以下四项：

1. this 总是指向它的直接调用者， 例如 obj.func() ,那么 func()里的 this 指的是 obj。
2. 在默认情况(非严格模式,未使用 ‘use strict’)，如果函数没有直接调用者，this 为 window
3. 在严格模式下,如果函数没有直接调者，this 为 undefined
4. 使用 call,apply,bind 绑定的，this 指的是绑定的对象

箭头函数的 this

箭头函数是没有绑定自己的 this，函数内使用的 this 是由静态作用域（也成为词法作用域，参考 this）决定。
静态作用域就是说箭头函数里 this 是由定义它的代码决定，而不是执行调用箭头函数的代码。

上面的说法有时很难理解，我自己总结的方法是：找出定义箭头函数的上下文（即包含箭头函数最近的函数或者对象）
那么上下文所处的父上下文（上一级上下文）即为 this 的指向。

Vue 中的 this

虽然在绝大多数的 Vue 方法中，this 都指向 Vue 实例

在 Vue 所有的生命周期钩子方法（如 created，mounted， updated 以及 destroyed）里使用 this，this 指向调用它的 Vue 实例，且不应该使用箭头函数。

但是也有部分例外：

data 中的箭头函数不会指向组件实例,this 指向 Vue 实例

computed 中的箭头函数不会指向组件实例,this 指向 Vue 实例

methods 中的箭头函数不会指向组件实例且不应该使用箭头函数来定义 method 函数,this 指向 Vue 实例

watch 中的 this 指向 windows不应该使用箭头函数来定义 watch 函数