首页 > web前端 > js教程 > 为什么 Vue.js 组件和使用箭头函数计算的属性中的'this”未定义?

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

Patricia Arquette
发布: 2024-11-18 12:05:02
原创
849 人浏览过

Why is

为什么在 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板