浅谈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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
浅析js实现网页截图的两种方式
Nov 01 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
vue实现lodop打印功能的示例
Nov 11 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
初品cakephp 入门基础
2012/02/16 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP开发注意事项总结
2015/02/04 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
js匿名函数使用&传参(实例)
2017/09/08 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python中的__slots__示例详解
2017/07/06 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
商场中秋节活动方案
2014/02/07 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2014年医院科室工作总结
2014/12/20 职场文书