浅谈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编写COM组件的步骤
Mar 17 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
layui select动态添加option的实例
Mar 07 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
详解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
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
php对象工厂类完整示例
2018/08/09 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
大学班级学风建设方案
2014/05/01 职场文书
计算机软件专业求职信
2014/06/10 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
地道战观后感
2015/06/04 职场文书
开业典礼致辞
2015/07/29 职场文书
2016年国培研修日志
2015/11/13 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
创业计划书之网吧
2019/10/10 职场文书