iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >怎么修复Vue中this is undefined的问题
  • 939
分享到

怎么修复Vue中this is undefined的问题

2024-04-02 19:04:59 939人浏览 泡泡鱼
摘要

小编给大家分享一下怎么修复Vue中this is undefined的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!当我们使

小编给大家分享一下怎么修复Vue中this is undefined的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

当我们使用 Vue 在愉快的开发项目的时候,突然报了一个错误:

this is undefined

别担心,不只有你一个人,我也经常遇到这个问题很多次,接下我们一起来看看如何解决这个问题。

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

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

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

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

  • 使用 fetch 或 axiOS 获取数据

  • 使用像 lodash 或 underscore 这类的库

理解两种主要的函数类型

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

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

常规函数

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

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

怎么修复Vue中this is undefined的问题

第二种方法是简写方式,我们也经常使用:

怎么修复Vue中this is undefined的问题

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

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

  • methods

  • computed props

  • watched props

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

箭头函数

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

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

怎么修复Vue中this is undefined的问题

在处理 this 问题时,真正的差异开始发挥作用。

箭头函数采用词法作用域,意味着箭头函数从它的上下文中获取this。

如果试图从Vue组件上的箭头函数内部访问 this,将得到一个错误,因为 this 不存在

怎么修复Vue中this is undefined的问题

简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。

有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。

怎么修复Vue中this is undefined的问题

现在我们知道两种主要的函数类型,如何正确使用它们?

匿名函数

当我们只需要创建一个函数而不需要从其他任何地方调用它时,匿名函数非常有用。

下面是使用匿名函数的一些场景:

  • 使用 axios 或 fetch 访存数据

  • filter、map和reduce等函数方法

  • 在 Vue 方法中的任何地方

来个例子看一下:

怎么修复Vue中this is undefined的问题

从示例中可以看到,大多数情况下,当我们创建匿名函数时,使用箭头函数。我们通常使用箭头函数有几个原因:

  • 更短、更简洁的语法

  • 改善可读性

  • this 取自父类

在Vue方法中,箭头函数也可以作为匿名函数使用。

等等,我们不是刚发现当我们试图访问 this 时,箭头函数不起作用吗?

这就是区别所在。

当我们在常规函数或简写函数中使用箭头函数时,常规函数将this设置为我们的Vue组件,而箭头函数则不一样。

来个例子:

怎么修复Vue中this is undefined的问题

filter方法可以访问this.match,因为箭头函数使用的方法与filteredMessages方法使用的上下文相同。由于此方法是常规函数(而不是箭头函数),因此将其自身的上下文设置为Vue实例。

让我们进一步讨论如何使用axios或fetch来获取数据。

在获取数据时使用正确的函数

如果正在使用fetch或axios获取异步数据,最好使用 Promise。Promise喜欢匿名箭头函数,它们也使处理this问题变得容易得多。

如果你正在获取一些数据并想在你的组件上设置它,这是你应该做的正确的方式:

怎么修复Vue中this is undefined的问题

请注意,我们如何在 Vue 组件上使用常规函数作为方法,然后在 Promise 内部使用匿名箭头函数

怎么修复Vue中this is undefined的问题

在fetchData()作用域内,我们将this设置为Vue组件,因为它是一个常规函数。由于箭头函数使用外部作用域作为它们自己的作用域,因此箭头函数也将this设置为我们的Vue组件。

这允许我们通过this访问 Vue 组件并更新dataFromServer。

但是,如果需要将函数传递帮助库,比如lodash或underscore,该怎么办呢

与 Lodash 或 Underscore 一起使用

假设我们的Vue组件上有一个要使用Lodash或Underscore方法。如何防止this is undefine的错误。

如果你用过 React ,你可能见过类似的东西。

这是我们用Vue做的。

怎么修复Vue中this is undefined的问题

就是这样!

我们要做的就是获取函数,将其包装在debounce函数中,然后返回一个内建了debounce的新函数。现在,当我们在Vue组件上调用this.methodToDebounce()时,我们将调用debounced版本。

什么是词法作用域

如前所述,常规函数和箭头函数之间存在差异的主要原因与词法作用域有关。来分析一下它的含义。

首先,作用域是程序中存在变量的任何区域。在Javascript中,window  变量具有全局作用域,它在任何地方都可用。尽管大多数变量被限制在定义它们的函数、它们所属的类或模块中。

其次,单词“词法”仅仅意味着作用域由你如何编写代码决定。某些编程语言只在程序运行时才确定作用域内的内容。这可能会让人很困惑,所以大多数语言都只使用词法作用域。

箭头函数使用词法作用域,而常规函数和简写函数不使用。

这里最棘手的部分是词法作用域如何在函数中影响  this。对于箭头函数,this与外部作用域的this绑定在一起。常规函数的this绑定方式有些奇怪,这就是引入箭头函数的原因,也是为什么大多数人尽可能多地使用箭头函数的原因。

作用域如何在函数中工作

下面是一些示例,它们演示了作用域如何在这两种函数类型之间以不同的方式工作

怎么修复Vue中this is undefined的问题

将作用域绑定到函数上

我们可以使用 bind 方法来改变 this 的绑定:

const boundFunction = unboundFunction.bind(this);

这使我们在编写Vue组件时具有更大的灵活性,更轻松地重用方法。当然,可读性相对差点,应该尽量避免太频繁地使用它。

以上是“怎么修复Vue中this is undefined的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: 怎么修复Vue中this is undefined的问题

本文链接: https://www.lsjlt.com/news/84262.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么修复Vue中this is undefined的问题
    小编给大家分享一下怎么修复Vue中this is undefined的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!当我们使...
    99+
    2024-04-02
  • vue中使用过滤器filters的this为undefined的问题
    目录使用过滤器filters的this为undefinedvue filter过滤器的用法使用过滤器filters的this为undefined vue中的过滤器更偏向于对文本数据的...
    99+
    2024-04-02
  • vue怎么解决this.$refs.xx在mounted中获取DOM元素为undefined问题
    今天小编给大家分享一下vue怎么解决this.$refs.xx在mounted中获取DOM元素为undefined问题的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文...
    99+
    2023-07-05
  • 基于Vue中this.$options.data()的this指向问题
    目录this.$options.data()的this指向问题vue文档中有关于data的指向问题的解释vue骚操作之this.$options.data()重置vue组件的data...
    99+
    2024-04-02
  • Vue中methods的this指向问题浅析
    如果是组件的话,将会是VueComponent实例对象,Vue和VueComponent两个类其实差不都,今后会另外开章节描述两者差别,这里先飘过。 比如下面的简单的一个demo代码...
    99+
    2022-11-13
    Vue methods Vue methods this指向
  • 怎么修复Ubuntu Linux中的 “Release file is not valid yet” 错误问题
    这篇文章将为大家详细讲解有关怎么修复Ubuntu Linux中的 “Release file is not valid yet” 错误问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。我最近在我的树莓派上...
    99+
    2023-06-15
  • Vue+ts里面this.$store问题怎么解决
    这篇文章主要介绍了Vue+ts里面this.$store问题怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue+ts里面this.$store问题怎么解决文章都会有所收获,下面我们一起来看看吧。Vue...
    99+
    2023-06-29
  • appcrash的问题怎么修复
    要修复appcrash的问题,可以尝试以下几种方法:1. 重启应用程序:关闭应用程序并重新打开它,有时候这可以解决问题。2. 清除缓...
    99+
    2023-09-17
    appcrash
  • JavaScript中的this指向问题怎么解决
    这篇文章主要介绍了一文搞懂JavaScript中的this指向问题的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇一文搞懂JavaScript中的this指向问题文章都会有所收获,下面我们一起来看看吧。this的...
    99+
    2023-07-04
  • JavaScript中this指向的问题怎么解决
    今天小编给大家分享一下JavaScript中this指向的问题怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1. 默...
    99+
    2023-07-05
  • Vue中关于this指向的问题示例详解
    目录由Vue管理的函数不被vue管理的函数this指向大致分类总结在Vue中,方法体里用this调用vue实例的数据,有时会指向window,导致调用失败报错。 由Vue管理的函数 ...
    99+
    2024-04-02
  • JavaScript中this指向问题怎么理解
    这篇文章主要介绍“JavaScript中this指向问题怎么理解”,在日常操作中,相信很多人在JavaScript中this指向问题怎么理解问题上存在疑惑,小编查阅了各式资料,...
    99+
    2024-04-02
  • vue中的Key值重复问题
    目录关于Key值重复问题v-for key值重复报错关于Key值重复问题 今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错,只要后台多表连接另一个时间表前端...
    99+
    2024-04-02
  • Vue中如何解决"This dependency was not found"的问题
    这篇文章主要为大家展示了“Vue中如何解决"This dependency was not found"的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起...
    99+
    2024-04-02
  • 怎样解决出现This system is not registered to Red Hat Subscription Management的问题
    怎样解决出现This system is not registered to Red Hat Subscription Management的问题,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你...
    99+
    2023-06-05
  • 在Vue中使用防抖与节流,及this指向的问题
    目录使用防抖与节流,及this指向问题一顿操作后使用防抖函数所遇见的坑正常写法使用Vue中写法使用Vue中的watch的防抖简写使用防抖与节流,及this指向问题 最近项目中遇到了防...
    99+
    2024-04-02
  • 怎么解决vue.js this.$router.push无效的问题
    这篇文章主要介绍了怎么解决vue.js this.$router.push无效的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如下所示:...
    99+
    2024-04-02
  • Vue中的Vue.set和this.$set怎么使用
    这篇文章主要介绍“Vue中的Vue.set和this.$set怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中的Vue.set和this.$set怎么使用”文章能帮助大家解决问题。一、...
    99+
    2023-06-29
  • Windows中Oobekeyboard Ooberegion Oobelocal oobe设置问题怎么修复
    本篇内容介绍了“Windows中Oobekeyboard Ooberegion Oobelocal oobe设置问题怎么修复”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领...
    99+
    2023-04-19
    windows
  • Linux中怎么修复因为DST导致的时间问题
    在Linux系统中,如果由于DST(夏令时)导致时间问题,可以通过以下几种方式修复: 手动调整时间:可以手动调整系统时间来纠正D...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作