为什么 Vue.js 箭头函数中的'this”未定义？

VueJS：解决“this”未定义问题

箭头函数可能是 VueJS 中的一个陷阱，导致意外的未定义值。这是因为箭头函数继承其父级的上下文，而不是绑定到 Vue 实例。

生命周期钩子

在 Mounted 等生命周期钩子中使用箭头函数时， this 不是指 Vue 实例。相反，它指的是父上下文，通常是 HTML 元素或触发挂载钩子的 Vue 组件。

mounted: () => {
  console.log(this); // undefined
},

计算属性

箭头函数计算属性中也会导致未定义的值。由于它们继承了父上下文，因此 this 并不引用 Vue 实例。

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
},

这会导致错误“Uncaught TypeError: Cannot read property 'bar' of undefined”。

解决方案

要解决此问题，请使用常规函数或 ECMAScript 5 函数简写而不是箭头函数：

mounted: function () {
  console.log(this);
},

mounted() {
  console.log(this);
}

通过使用这些方法，您可以确保this 始终引用 Vue 实例，在生命周期挂钩和计算属性中提供预期的行为。

以上是为什么 Vue.js 箭头函数中的'this”未定义？的详细内容。更多信息请关注PHP中文网其他相关文章！