美文网首页
vue中this指向问题

vue中this指向问题

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-01-06 18:28 被阅读0次

根据VUE官方文档给出的解释

在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,

this指向调用它的Vue实例,即(new Vue)

在普通函数中,this指向调用它对象。

在箭头函数中,this指向的是箭头函数本身

一般我们用const that = this 来保存当前this的状态,

比如当前指向的是window, 那么保存this状态以后,在函数中用that即可表示指向window。

注:【普通函数的this】

普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:

1、this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。

2、在默认情况(非严格模式,未使用 ‘use strict’),如果函数没有直接调用者,this为window

3、在严格模式下,如果函数没有直接调者,this为undefined

4、使用call,apply,bind绑定的,this指的是绑定的对象

1)对于普通函数(包括匿名函数),this指的是直接的调用者,

在非严格模式下,如果没有直接调用者,this指的是window。

showMessage1()里setTimeout使用了匿名函数且没有直接调用者,this指向window。

2) 箭头函数是没有自己的this,在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例,所以它里面使用的this指向vue实例。

绑定vue实例到this的方法:

1、使用bind将匿名函数的指向变为Vue实例(bind不会自动执行,默认返回一个函数)

showMessage1()可以改为:

2、把vue实例的this赋值给另一个变量再使用


相关文章

  • vue中this指向问题

    根据VUE官方文档给出的解释 在Vue所有的生命周期钩子方法(如created,mounted,updated以及...

  • Vue中this指向的问题

    我们知道,如果Vue的data中有属性message,那么方法中直接用this.message就可以获取到这个me...

  • vue中this的指向问题

    在函数中需要遍历数组等对象时,遍历中的this会指向window,所以需要在遍历前定义一下this指向

  • vue中的this指向问题

    第一个输出英文"Hello!”,第二个输出中文“你好!”。这说明了showMessage1()里的this指的是w...

  • Vue中this使用的注意事项

    一、 axios中this的指向问题 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为u...

  • axios 在vue中this指向问题

    在Vue中this始终指向Vue,但axios中this为undefined,例如 若需要赋值给变量用以渲染数据,...

  • Vue笔记 -- axios中this的指向问题

    axios中this的指向问题

  • vue中this指向小记

    普通函数中的的this指向取决于运行该函数的作用域,而箭头函数的this是定义时就固定了。然而在vue中有一事不明...

  • Vue常见错误

    1 this指向 vue中this指向的vm实例,如果map或者filter循环中,this的指向就是个迷了 解决...

  • 为什么vue要使用 let that = this

    在Vue中this始终指向Vue,但一些其他组件如axios中this为undefined,通过let that ...

网友评论

      本文标题:vue中this指向问题

      本文链接:https://www.haomeiwen.com/subject/mfehcrtx.html