Vue中this指向问题
2023-03-17 本文已影响0人
扶得一人醉如苏沐晨
一、由Vue管理的函数
例如:
- computed 计算属性
- watch 监视属性
- filters (Vue3中已弃用且不再支持) 过滤器
- methods
上述属性里配置的函数this指向Vue实例,不要采用箭头函数写法
,因为箭头函数没有自己的this对象,使用this时会向外找到window
,不会指向Vue实例
,也就调用不到Vue中的数据。
二、不被vue管理的函数
- setTimeout计时器里的回调函数
- setInterval定时器里的回调函数
- ajax请求里的回调函数
上述回调函数使用普通函数定义的话,里面的this指向的是window,
所以在被Vue管理的函数中写不被Vue管理的函数,,要用箭头函数,此时this会向函数外找,找到Vue实例(因为在vue环境里嘛)。
三、总结
在Vue环境里:
- 由Vue管理的函数,尽量使用普通函数定义。
- 不被Vue管理的函数,尽量使用箭头函数定义。
- 这样保证this总是指向Vue实例,可以调用到Vue数据。