先看1个重要原则：

        由Vue管理的函数，一定不要写箭头函数，箭头函数的this就不再是Vue实例了

箭头函数的 this 指向在定义时确定，继承自外层作用域（即定义时的上下文）的 this，且无法通过 call、apply  或  bind 改变。以下是关键点总结：

1. 词法作用域的 this

• 箭头函数没有自己的 this，它使用外层非箭头函数作用域的 this 值。若外层没有函数，则指向全局对象（如 window 或 global）。

• 示例：

  const obj = {value: 42,getValue: function() {// 普通函数中的 this 指向 objconst arrowFn = () => this.value;return arrowFn();}
  };
  console.log(obj.getValue()); // 输出 42

  2. 与普通函数的区别

• 普通函数：this 由调用方式决定（如对象方法、构造函数、事件监听等）。

• 箭头函数：this 固定为定义时的外层 this。

• 示例对比：

  // 普通函数（this 指向调用者）
  const obj1 = {value: 10,fn: function() { console.log(this.value); }
  };
  setTimeout(obj1.fn, 100); // 输出 undefined（this 指向全局）// 箭头函数（this 继承外层）
  const obj2 = {value: 10,fn: function() {setTimeout(() => console.log(this.value), 100); // 继承外层 this（obj2）}
  };
  obj2.fn(); // 输出 10

  3. 无法通过绑定方法修改

• 使用 call、apply 或 bind 无法改变箭头函数的 this。

• 示例：

  const outerThis = { name: "Outer" };
  const arrowFn = () => console.log(this.name);
  arrowFn.call({ name: "New" }); // 输出 "Outer"（若外层 this 指向全局则可能输出 undefined）

  4. 对象字面量中的陷阱

• 对象字面量不创建作用域，内部箭头函数的 this 指向全局。

• 示例：

  const obj = {value: "Hello",getValue: () => console.log(this.value) // this 指向全局（如 window）
  };
  obj.getValue(); // 输出 undefined（假设外层为全局）

  5. 在构造函数中的行为

• 箭头函数作为构造函数会报错（不能 new）。

• 但若在构造函数内定义，箭头函数会继承实例的 this：

  function Person() {this.age = 0;setInterval(() => {this.age++; // this 指向 Person 的实例}, 1000);
  }
  const p = new Person(); // age 每秒自增

  6.总结

• 箭头函数的 this：继承自定义时的外层作用域，且不可更改。

• 使用场景：需要固定 this 时（如回调、事件处理、setTimeout）。

• 避免场景：需要动态 this 时（如对象方法、构造函数）。

通过理解箭头函数的词法 this 特性，可以更灵活地控制代码中的上下文绑定。