关于vue组件中定时器中只能使用箭头函数的问题
vue组件中的定时器只能使用箭头函数的问题。()=>{ }箭头函数。
·
在学习vue实战里轮播图自动轮播部分的时候用到了js定时器,这个时候发现了一些问题:定时器中的函数只能使用箭头函数的问题,普通的函数会报错。让我一度认为是定时器函数写错的问题,怎么该都不对,后来终于找到了问题的所在:
箭头函数中的this指向是固定不变的,即是在定义函数时的指向;
而普通函数中的this指向时变化的,即是在使用函数时的指向。
这就是,该问题的根源所在。
部分实例代码:
箭头函数代码:
methods: {
goPage: function (index) {
this.newPage = index
},
inv: function () {
this.invt = setInterval(() => {
this.goPage(this.nextPage)
console.log(this)
//此时的this指向是该vue组件,不管在哪个地方使用,指向都是该vue组件。
}, 1000)
}
}
普通函数的代码:
methods: {
goPage: function (index) {
this.newPage = index
},
inv: function () {
this.invt = setInterval(function () {
this.goPage(this.nextPage)
console.log(this)
//此时的this并不是该vue组件,而是指向window。
}, 1000)
}
}
setInterval()函数与getTimeout()是window对象的函数,所以,里面的this会指向window
更多推荐
已为社区贡献23条内容
所有评论(0)