vue中的this指向问题

本文探讨了在Vue项目中this的指向问题,包括正常函数与箭头函数的区别,以及在Vue实例、生命周期钩子和事件监听中的行为。在Vue的methods中,正常函数的this指向Vue实例,而箭头函数的this则继承自外层作用域。生命周期钩子的this始终指向Vue实例。总结来说,避免在Vue方法中使用箭头函数以防止this指向不正确。
摘要由CSDN通过智能技术生成

        最近写项目遇到很多this指向的问题,今天来写一下我总结的this指向

        看了很多文章,之前也在私下总结过,对于正常函数,谁调用的它,this就指向谁,而箭头函数没有this,它的this指向一般就是上下文中,与谁调用它没关系。

        但是在Vue实例中,methods中如果用的是正常函数,那么它的this就指向Vue实例;如果是箭头函数,this就指向window对象。

        在Vue的官方文档是这么解释的:

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

1. Vue中生命周期钩子和自定义方法中的this指向当前的 Vue 实例:

        生命周期钩子的 this 上下文指向调用它的 Vue 实例

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。

2. Vue 中回调函数中的 this:

  1. 若回调函数为匿名函数,非严格模式下指向 window,严格模式下为 undefined。
  2. 若回调函数为自定义方法,则 this 指向 Vue 实例。
  3. 若回调函数为 箭头函数,则 this 指向 Vue 实例。

3. Vue 中 addEventListener 中的 this

        通常,事件监听函数中的 this 都指向绑定事件的那个元素, 但是在 Vue 中,监听函数中的 this 也指向 Vue 实例

总结:除了回调函数中的 this ,其它地方的 this 均指向 Vue 实例

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值