关于箭头函数的 this 绑定

问题是怎么产生的

测试箭头函数在不同情景下的使用，当测试到Vue内生命周期调用计时器时，使用箭头函数渲染，普通函数不渲染，代码：

<template>
  <div class="container">
    <div :class="{'style1': this.styleType == 1, 'style2': this.styleType == 2}">测试箭头函数</div>
  </div>
</template>
<script>
export default {
  name: 'class3',
  data () {
    return {
      styleType: 1
    }
  },
  created () {
    setTimeout(function () { // 使用setTimeout(()=> {this.styleType = 2},2000),2秒后页面渲染会改变，使用function不会。
      this.styleType = 2
    }, 2000)
  }
}
</script>
<style lang="less" scoped>
.style1{
  font-size: 20px;
  color: red;
}
.style2{
  font-size: 40px;
  color: green;
}
</style>

原因在于：

setTimeout是window对象的方法，非严格模式下，当使用window对象方法调用function的时候，它的this会指向调用它的window。箭头函数的this指向当前上下文，所以会指向我们的Vue实例对象。而触发Vue的VM层动态渲染是Vue的实例。

除了箭头函数外，解决办法有几种，比如：

1. 定义局部的 this，让他指向上下文。

created () {
    let _this = this  //指定 _this 指向上下文
    setTimeout(function () {
      _this.styleType = 2
    }, 2000)
  }

2. 如果我们会频繁更改这个 ‘styleType’ ，那么就将它定义在 methods 上下文当中，在 setTimeout 中调用。

created () {
    setTimeout(this.setStyleType, 2000)
  },
  methods: {
    setStyleType () {  //状态可多次调用，如果还有更多状态，可以考虑传参
      this.styleType = 2
    }
  }