《setTimeout在vue中的正确使用》

2020-07-27 3,753 阅读1分钟

在做Vue项目时使用setTimeout，在里面调用this.$router.push({ path: "/xxx" })方法，报错push 不是一个函数

使用settimeout时，此时的this指向window，为什么this指向会变，不再指向data对象呢？

这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象

解决方法：

1.使用箭头函数

export default {
 methods: {
   start: function () {
   setTimeout(() => {
    this.$router.push({ path: "/xxx" })
   }, 300);
  }
 }

2.把data里的this暂时存起来_this=this；setTimeout()调用时使用_this

data(){
    _this = this
}

methods: {
   start: function () {
    setTimeout(() => {
     _this.$router.push({ path: "/xxx" })
    }, 300);
   }
}