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

Vue中this指向问题

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-03-17 16:49 被阅读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数据。

    相关文章

      网友评论

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

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