Vue中关于this指向的问题示例详解
更新时间：2022年07月20日 08:59:21 作者：ね律こ
在Vue中，方法体里用this调用vue实例的数据，有时会指向window，导致调用失败报错，这篇文章主要介绍了Vue中关于this指向的问题 ,需要的朋友可以参考下
在Vue中，方法体里用this调用vue实例的数据，有时会指向window，导致调用失败报错。
由Vue管理的函数
例如：
computed计算属性watch监视属性filters (Vue3中已弃用且不再支持)过滤器....
上述属性里配置的函数不要采用箭头函数写法，因为箭头函数没有自己的this对象，使用this时会向外找到window，不会指向Vue实例，也就调用不到Vue中的数据。
不被vue管理的函数
例如：
setTimeout计时器里的回调函数setInterval定时器里的回调函数ajax请求里的回调函数....
上述回调函数(除定时器外)使用普通函数定义的话，里面的this指向的是window，定时器中this指向undifined(这个死磕了老长时间，vscode没提示，换webstorm调试出来的...)
用箭头函数时，this会向函数外找，找到Vue实例（因为在vue环境里嘛）。
this指向大致分类
奉上 菜鸟教程(yyds) 里大佬总结的
- 在对象方法中， this 指向调用它所在方法的对象。
- 单独使用 this，它指向全局(Global)对象。
- 函数使用中，this 指向函数的所属者。
- 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
- apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。
附上 菜鸟中介绍this的直达链接：this详解
总结
在Vue环境里：
- 由Vue管理的函数,尽量使用普通函数定义。
- 不被Vue管理的函数，尽量使用箭头函数定义。
- 监视属性里的普通函数，函数体里要使用定时器的话，要用箭头函数来定义定时器。(举个栗子)
这样保证this总是指向Vue实例，可以调用到Vue数据。
到此这篇关于Vue中关于this指向的问题 的文章就介绍到这了,更多相关vue this指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Axios是一款网络前端请求框架，本文主要介绍了vue中Axios添加拦截器刷新token的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API，类型是一个函数，本文通过完整代码给大家详细讲解，需要的朋友可以参考下2022-10-10
Vue作为一款流行的前端框架,已经在许多项目中得到广泛应用,然而,随着我们在Vue中构建更大规模的应用程序,我们可能会遇到一个严重的问题,那就是内存泄漏,因此,我们需要认识到在Vue开发过程中,内存泄漏问题的重要性,本文将给大家介绍如何解决和预防内存泄漏问题2023-10-10
这篇文章主要介绍了Vue中watch监听第一次不触发、深度监听问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
响应式 API 赋予了组合式 API 一大坨可能性的同时,代码精简,虽然但是,我们应该意识到响应性的某些陷阱,比如丢失响应性,在本文中,我们将学习如何正确解构 Vue 组件的 props,使得 props 不会丢失响应性2024-01-01
这篇文章主要介绍了解决vue 局部过滤器获取不到this的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
本篇文章主要介绍了使用vue构建移动应用实战代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
VScode中配置ESlint+Prettier详细步骤(附图文介绍)
这篇文章主要介绍了VScode中配置ESlint+Prettier详细步骤,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-12-12
element plus tree拖动节点交换位置和改变层级问题(解决方案)
图层list里有各种组件,用element plus的tree来渲染,可以把图片等组件到面板里,面板是容器,非容器组件,比如图片、文本等,就不能让其他组件拖进来,这篇文章主要介绍了element plus tree拖动节点交换位置和改变层级问题(解决方案),需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue使用map代替Aarry数组循环遍历的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论