最近在做一个数据可视化的项目,其中就不得不考虑数据项定时刷新功能了。
所以就在我们的vue项目中使用了定时器。
1、在vue中,有两套定时器,一套是浏览器API,window对象上的;另一套就是vue/nodejs封装的,需要引入
import { setInterval, clearInterval } from 'timers'
建议使用window对象自带的,因为不容易错。
如果一不小心只引入一个,就怎么也清不掉了。
import { setInterval } from 'timers' // 错误
2、一定要在beforeDestroy中清除定时器。
3、在setTimeout中定义的函数时,奇怪的this对象
mounted () {
// 第一种,标准调用
// this指向window对象,因为回调函数是在全局环境下调用的
window.setTimeout(function () { console.log(this) }, 0)
// 第二种,箭头函数调用
// 箭头函数在定义时确定this对象的,是vue实例
window.setTimeout(() => console.log(this), 0)
// 第三种,立即执行函数
window.setTimeout((function () {
// this竟然是undefined!不可思议
// 事实上,this为undefined的情况就只有模块的顶层对象
// 也就是说,这里的this指向的就是当前vue模块的顶层对象(???)
console.log(this)
// this是windo