修复Vue中的 “this is undefined” 问题

一个可能的原因是混淆了常规函数和箭头函数的用法，如果你遇到这个问题，我猜你用的是箭头函数。如果用常规函数替换箭头函数，它可能会为你修复这个问题。

我们再深入一点，试着理解为什么会这样。

毕竟，知识就是力量，如果知道造成问题的原因，那么我们将来可以避免很多挫败感和时间浪费。

还有一些其它原因可能也会出现此类错误。

• 使用 fetch 或 axios 获取数据
• 使用像 lodash 或 underscore 这类的库

理解两种主要的函数类型

在 JS 中，我们有两种不同的函数。它们以几乎相同的方式运作，除了它们处理变量的方式不同。

这给新旧Javascript开发人员带来了很多困惑，但是当我们弄懂这个问题时，就很好会有这个困惑。

常规函数

常规函数可以用几种不同的方式定义。

第一种方法在 Vue 组件中较不常见，因为写出来要更长一些：

 

在像这样的常规函数中，this将引用函数的“所有者”。因为我们是在Vue组件上定义它的，所以this指的是Vue组件。

在大多数情况下，我们应该在 Vue 中使用常规函数，特别是在创建时

• methods
• computed props
• watched props

虽然常规函数通常是我们所需要的，但是箭头函数也非常方便。

箭头函数

箭头函数可以更短，更快的编写，因此最近获得了广泛的欢迎。但是，它们在对象上定义方法时并没有太大的不同，就像我们在编写Vue组件时所做的那样。

这是他们在Vue组件上的样子：

（编辑：鞍山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!