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

Vue.js 组件中“this”出现意外的未定义值

构建 Vue.js 组件时，在生命周期挂钩中访问“this”或计算属性可能会产生意外的“未定义”结果。箭头函数，用语法“() => {}”表示，改变 Vue 实例上下文之外的“this”的绑定。

生命周期钩子

在提供的示例中：

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

箭头函数将“this”绑定到Vue实例之外的范围，导致到“未定义”评估。

计算属性

类似地，在计算属性中：

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

箭头函数为“this”导致“无法读取未定义的属性‘bar’”错误。

解决方案

要解决此问题并确保正确引用“this”作为 Vue 实例，请考虑使用以下技术：

1. 常规函数： 使用常规函数语法，如所示by:

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

2. ECMAScript 5 简写： 或者，您可以使用 ECMAScript 5 函数简写：

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

通过使用这些方法，您可以在 Vue.js 组件中建立“this”的正确绑定，确保可访问组件的属性和方法符合预期。

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