Vue的methods里面不可以使用箭头函数_methods中可以用箭头函数吗_蚂蚁的希望的博客

Vue的methods里面不可以使用箭头函数

vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefined
methods: {
    test: () => {
        console.log(this); // undefined
箭头函数没有this，this其实是外部的this，即箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。所以箭头函数的this是固定的，不能改变或者重新绑定 
箭头函数转成 ES5 的代码如下。
// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
// ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
而普通函数的this，是指向运行时所在的作用域，所以是可以改变或重新绑定 
function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。 
回到原来vue中methods使用箭头函数时，this为undefined的问题，查看源码 
function initMethods (vm, methods) {
  var props = vm.$options.props;
  for (var key in methods) {
    if (process.env.NODE_ENV !== 'production') {
      if (typeof methods[key] !== 'function') {
        warn(
          "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " +
          "Did you reference the function correctly?",
      if (props && hasOwn(props, key)) {
        warn(
          ("Method \"" + key + "\" has already been defined as a prop."),
      if ((key in vm) && isReserved(key)) {
        warn(
          "Method \"" + key + "\" conflicts with an existing Vue instance method. " +
          "Avoid defining component methods that start with _ or $."
    vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
关键的一行 
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
这里会把methods上的方法都挂载到vue实例上，即this指向vue，而前面说过，箭头函数是没有this的，并且是无法改变或重新绑定的，又因为methods是一个对象，而对象不构成单独的作用域，导致箭头函数定义时的作用域是全局作用域，也就是window对象，所以vue的methods中不可以使用this。 
那么问题来了，按这么说，那this应该是window对象，那为什么打印出来的是undefined呢？ 
原因是vue中使用的是严格模式use strict，所以this是undefined。 
参考：
 https://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0
                    Vue的methods里面不可以使用箭头函数vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefinedmethods: {    test: () =&gt; {        console.log(this); // undefined    }}箭头函数没有this，this其实是外部的this，即箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。所以箭头函数的this是固定的，不能改变或者重
				vue中的methods的this指向什么？
第一个打印出的是实例对象，第二个打印的是window,因为箭头函数存在一个特性就是其中不存在this,会向上一层作用域中进行查找，其中上一层作用域必须为函数作用域或者是全局作用域。所以此时找到全局作用域，此时为window。
为什么不使用箭头函数？
如图所示该部分为methods部分对应的源码
源码实现思路为：遍历methods中的属性名和函数，将该值复制到ctx中，并且在其中使用bind函数进行绑定（将值绑定到publicThis）,如果若为箭头函数的话，
在 Vue 的 methods 和 computed 中不能使用箭头函数，箭头函数中的 this 会指向 windows 而非 Vue 的实例。
<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Vue methods和computed中不能使用箭头函数</title>
</head>
				最近写项目遇到很多this指向的问题，今天来写一下我总结的this指向
看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。
但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。
在Vue的官方文档是这么解释的：
methods 将被混入到 Vue ...
				Vue里面methods对象里面如果使用箭头函数会导致this指向不是vue实例，而是一个xxx.a的一个类，尽量不要在vue所定义的字段里面使用箭头函数。
由此可见，vue中的自带方法使用箭头函数会出现各种错误，慎用！！！
				在Vue中，data选项用于定义组件实例的初始数据。通常情况下，我们可以将data选项定义为一个对象，其中包含所有数据属性及其初始值。但是，有时候我们需要为每个组件实例提供一个独立的数据副本，以避免组件之间相互影响。为了实现这一点，我们可以使用一个函数来定义data选项。
使用函数式的data选项有两个好处：
1. 每个组件实例都会调用一次这个函数，返回一个新的数据对象，从而避免了组件之间共享数据的问题。
2. 函数式的data选项可以访问组件实例的属性，例如props和methods，从而可以动态地设置数据属性的初始值。
因此，使用函数式的data选项是一种更加灵活和安全的方式来定义组件的初始数据。