当前位置：首页 > article >正文

【Vue】在 Vue 组件的 methods 中，箭头函数和不带箭头函数中的this的区别

article 2024/11/5 21:49:16

具体说明

箭头函数在定义时就绑定了它的 this，这个 this 通常是组件定义环境的上下文（即创建 Vue 实例之前的环境），而不是 Vue 实例本身。这意味着在 Vue 组件的 methods 中使用箭头函数时，this 通常不会指向 Vue 实例。

举个例子

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    regularMethod() {
      console.log(this.message); // `this` 指向 Vue 实例
    },
    arrowMethod: () => {
      console.log(this.message); // `this` 不是 Vue 实例
    }
  }
});

在这个例子中：

regularMethod 是一个普通函数，它的 this 是动态的，取决于函数的调用方式。在 Vue 组件中，通过 this.regularMethod() 调用时，this 指向 Vue 实例，因此 this.message 输出 Hello, Vue!。
arrowMethod 是一个箭头函数。箭头函数的 this 是在定义时确定的。在 Vue 组件的 methods 中定义箭头函数时，它的 this 并不是 Vue 实例，而是定义箭头函数时的上下文。在这个例子中，箭头函数的 this 可能是全局对象（在浏览器中是 window）或模块作用域，而不是 Vue 实例。因此，this.message 通常是 undefined 或引发错误。

更具体的解释

当你在 Vue 组件的 methods 中定义一个箭头函数时，这个箭头函数的 this 是在定义它的地方捕获的，而不是在调用它的地方。

const someContext = {
  message: 'This is not Vue!'
};
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    arrowMethod: () => {
      console.log(this.message); // `this` 是 `someContext`，不是 Vue 实例
    }
  }
});

在这个例子中，如果 arrowMethod 是在 someContext 中定义的，那么 this 将指向 someContext，而不是 Vue 实例。因此，this.message 输出 This is not Vue!。

结论

在 Vue 组件的 methods 中，避免使用箭头函数，因为它们的 this 取决于定义时的上下文，而不是 Vue 实例。使用普通函数可以确保 this 正确指向 Vue 实例。

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    regularMethod() {
      console.log(this.message); // `this` 指向 Vue 实例
    }
  }
});