Vue中this指向问题

1 由Vue管理的函数

• computed 计算属性
• watch 监视属性
• filters (Vue3中已弃用且不再支持) 过滤器
• methods
  上述属性里配置的函数this指向Vue实例，不要采用箭头函数写法，因为箭头函数没有自己的this对象，使用this时会向外找到window，不会指向Vue实例，也就调用不到Vue中的数据。

2 不被Vue管理的函数

• setTimeout计时器里的回调函数
• setInterval定时器里的回调函数
• ajax请求里的回调函数

上述回调函数使用普通函数定义的话，里面的this指向的是window，

所以在被Vue管理的函数中写不被Vue管理的函数，要用箭头函数，此时this会向函数外找，找到Vue实例（因为在vue环境里）。

3 总结

在Vue环境里：

• 由Vue管理的函数,尽量使用普通函数定义。
• 不被Vue管理的函数，尽量使用箭头函数定义。
• 这样保证this总是指向Vue实例，可以调用到Vue数据。