为什么 Vue.js 组件和使用箭头函数计算的属性中的“this”未定义？

为什么在 Vue.js 组件和计算属性中未定义对“this”的引用？

在 Vue.js 中，定义组件和利用计算属性涉及使用“this”关键字。然而，开发人员经常遇到这样的问题：在某些情况下，“this”的计算结果为“未定义”。本文旨在阐明发生这种情况的原因并提供解决方案。

在生命周期钩子（例如 Mounted 和 Updated）或计算属性中使用箭头函数（例如 () => {}）时， “this”可能与预期的 Vue 实例不同。 Vue.js 文档明确建议不要在此类上下文中使用箭头函数。相反，开发人员应该使用常规函数或 ECMAScript 5 速记语法来确保“this”正确引用 Vue 实例。

考虑组件的示例：

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

在这种情况下，箭头函数 () => {} 将“this”绑定到 Vue 组件外部的不同上下文。因此，在函数外部使用“this”访问属性或方法将会失败。

同样，在计算属性中：

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

使用箭头函数 () = 计算属性的值评估> {} 也会导致“this”未定义。这会导致错误“无法读取未定义的属性‘bar’。”

要纠正此问题，可以使用常规 JavaScript 函数或 ECMAScript 5 简写：

mounted: function () {
  console.log(this); // correctly logs the Vue instance
}

mounted() {
  console.log(this); // also correctly logs the Vue instance
}

这些示例演示了常规函数或 ECMAScript 5 速记方式如何将“this”正确绑定到 Vue 组件实例，解决“this”求值的问题改为“未定义”。

以上是为什么 Vue.js 组件和使用箭头函数计算的属性中的“this”未定义？的详细内容。更多信息请关注PHP中文网其他相关文章！