vue中什么时候用箭头函数

在Vue中，使用箭头函数通常有两种情况：

1. 在Vue的methods中使用箭头函数：当需要使用methods中的函数作为事件处理程序时，可以使用箭头函数来确保函数中的this指向Vue实例。由于普通函数会将this绑定为调用该函数的对象，而箭头函数会将this绑定为定义时的上下文，所以在Vue的methods中使用箭头函数可以避免this指向出现问题的情况。

示例代码：

methods: {
  handleClick: () => {
    // 在这里的this指向Vue实例
    console.log(this.message);
  }
}

2. 在Vue组件中的计算属性和监听器中使用箭头函数：当需要在Vue组件的计算属性或监听器中使用箭头函数时，可以确保函数中的this指向Vue实例。与上述情况类似，由于普通函数会将this绑定为调用该函数的对象，而箭头函数会将this绑定为定义时的上下文。

示例代码：

computed: {
  fullName: () => {
    // 在这里的this指向Vue实例
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  age: () => {
    // 在这里的this指向Vue实例
    this.checkAge();
  }
}

需要注意的是，在Vue中尽量避免过度使用箭头函数，因为箭头函数会创建一个全新的上下文，可能会导致一些性能问题。而且对于Vue的生命周期方法，官方推荐使用普通函数。

在Vue中使用箭头函数主要有以下几种情况：

1. 在Vue的方法中使用箭头函数：Vue组件中的方法通常是被Vue实例所调用的，而这些方法中的this指向的是Vue实例本身。如果使用箭头函数来定义方法，箭头函数的this将会指向定义它的环境，而不是Vue实例。因此，如果想要在方法中使用Vue实例的属性或者方法，就需要使用普通函数来定义。

2. 在计算属性中使用箭头函数：计算属性通常是根据Vue实例的状态来计算出一个新的值，这个值会被缓存起来，只有在依赖的状态发生改变时才会重新计算。由于箭头函数的this绑定规则，箭头函数无法获取到Vue实例的this，因此也无法获取到Vue实例的状态。在计算属性中使用箭头函数是没有意义的，应该使用普通函数来定义计算属性。

3. 在事件处理函数中使用箭头函数：在Vue中，事件处理函数可以直接在模板中使用箭头函数来定义。这是因为模板中的事件处理函数会在Vue实例的上下文中执行，this会自动绑定到Vue实例。因此，可以在模板中使用箭头函数来定义事件处理函数。

4. 在Vue组件中的生命周期钩子函数中使用箭头函数：Vue组件的生命周期钩子函数是在特定的时机被调用的函数，它们中的this指向的是Vue实例。在生命周期钩子函数中使用箭头函数是没有意义的，应该使用普通函数来定义。

5. 在Promise中使用箭头函数：在Vue中使用Promise来处理异步操作时，可以使用箭头函数来定义Promise的回调函数。由于箭头函数的this指向的是定义它的环境，而不是Promise本身，因此可以很方便地在箭头函数中使用Vue实例的属性和方法。

在Vue中，使用箭头函数有以下几种情况：

1. 在Vue组件的方法中使用箭头函数可以确保该方法中的this指向组件实例。普通函数中，this的指向是调用者，而在Vue的组件中，很多时候我们需要将this绑定到组件实例上以便访问组件中的数据和方法。

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    handleClick: () => {
      console.log(this.message) // undefined
    },
    handleButtonClick() {
      console.log(this.message) // Hello Vue!
    }
  }
}

上述代码中，handleClick方法使用箭头函数定义，由于箭头函数没有自己的this，所以this指向的是组件实例，但由于组件实例中没有message属性，所以输出undefined。而handleButtonClick方法使用普通函数定义，this指向的是调用者，即按钮元素，而按钮元素中并没有message属性，所以输出为空。

2. 在Vue的计算属性中使用箭头函数可以确保this始终指向计算属性本身，而不是绑定到计算属性的对象。在计算属性中，我们有时候需要访问其他属性，使用箭头函数避免了使用额外的变量来保存this的值。

export default {
  data() {
    return {
      width: 10,
      height: 5
    }
  },
  computed: {
    area: () => {
      return this.width * this.height // NaN
    },
    perimeter() {
      return this.width * 2 + this.height * 2 // 30
    }
  }
}

上述代码中，area计算属性使用箭头函数定义，由于箭头函数没有自己的this，所以this指向的是全局对象，而全局对象中并没有width和height属性，所以计算结果为NaN。而perimeter计算属性使用普通函数定义，this指向的是绑定到计算属性的对象，即组件实例，所以可以正确计算出perimeter的值。

需要注意的是，在Vue的方法和计算属性以外的地方使用箭头函数可能会导致意想不到的问题，因为箭头函数没有自己的this，并且无法使用bind、call和apply来改变其this指向。在Vue中，不建议在生命周期钩子函数、监听器和事件处理器中使用箭头函数。