浅谈vue 组件中的setInterval方法和window的不同


Posted in Javascript onJuly 30, 2020

vue组件中,this指向实例,【实例中重写了setInterval等一整套方法】。所以,千万不能和 window 下挂载的方法混用

具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回【定时器对象】,当然该对象中包含一个_id的私有属性

因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法

vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法

//正确的用法
mounted() {
 // 如果不加 window ,则会使用 vue实例的方法,将无法清除定时器
 this.timer = window.setInterval(() => {
  this.date = new Date();
 }, 2000);
 console.log(this.timer);//number
},
methods: {
 clearTimer() {
  window.clearInterval(this.timer);
  this.timer = null;
 }
}

补充知识:vue 切换页面 setInterval

vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。

mounted(){
   clearInterval(this.timer);
   this.setTimer();
  },
  destroyed(){
  clearInterval(this.timer)
 }

以上这篇浅谈vue 组件中的setInterval方法和window的不同就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
轮播的简单实现方法
Jul 28 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
详解JavaScript自定义函数
Jul 29 #Javascript
深入了解JavaScript词法作用域
Jul 29 #Javascript
vue监听dom大小改变案例
Jul 29 #Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
详解JavaScript作用域 闭包
Jul 29 #Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 #Javascript
Vue 监听元素前后变化值实例
Jul 29 #Javascript
You might like
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php输出形式实例整理
2020/05/05 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python 除法保留两位小数点的方法
2018/07/16 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
工程造价专业大学生职业规划范文
2014/03/09 职场文书
1亿有多大教学反思
2014/05/01 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS