vue中优雅的使用定时器
1、常见方法。在data中声明一个变量,定时器绑定到变量中,然后在beforeDestory中销毁这个定时器
举个例子
首先我在data函数里面进行定义定时器名称
- data() {
- return {
- timer: null // 定时器名称
- }
- },
然后这样使用定时器:
- this.timer = (() => {
- // 某些操作
- }, 1000)
最后在beforeDestroy()生命周期内清除定时器:
- beforeDestroy() {
- clearInterval(this.timer);
- this.timer = null;
- }
- 它需要在这个组件实例中保存这个
timer
,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。 - 我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西。
2、通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时
- const timer = setInterval(() =>{
- // 某些定时器操作
- }, 500);
- // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
- this.$once('hook:beforeDestroy', () => {
- clearInterval(timer);
- })
综合来说,我们更推荐使用方案2,使得代码可读性更强,一目了然。
vue中优雅的使用定时器的更多相关文章
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
- 在vue中优雅地实现简单页面逆传值
[需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中, ...
- 在vue中优雅的使用LocalStrong
h5的LocalStrong帮我们缓存一些数据到本地,最常用的使用场景,比如京东购物在未登陆的状态下,把商品加入购物车,收藏某个商品.当我们把url复制到另外一个浏览器,购物车就是空的. 以下是一个简 ...
- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
- vue中使用定时器时this指向问题
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
- Vue中在组件销毁时清除定时器(setInterval)
在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...
- 如何在Vue项目中优雅的使用sass
开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...
- Vue.js优雅的实现列表清单的操作
一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...
- Vue.js优雅的实现列表清单
一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
随机推荐
- Mixly呼吸灯及可调灯(物联网)
3挡可调灯 2秒呼吸灯
- 通过VS Code轻松连接树莓派
如果您正在使用树莓派作为开发平台,那么通过远程连接VS Code到树莓派是非常方便的一种方法.这样,您可以在Windows或macOS等计算机上开发和测试代码,而不必在树莓派上进行. 以下是通过VS ...
- PPT之图表
1.从数据到信息 同样的数据,通过不同的图样式来呈现不同的突出重点.使用饼状图突出元素占比,使用排序的柱状图突出最大或者最小的元素,使用虚化与实体突出表达重点. 同样的数据,通过不同的关注点突出重点. ...
- linux 离线安装jdk
系统版本:centos7.8 | jdk版本:1.8 jdk版本:jdk-8u5-linux-x64.rpm 点击下载 提取码: ud1r 检查系统是否已经有JDK,输入如下命令查看是否系统中是否已安 ...
- Java 数据库表关联更新
SqlServer 关联更新语句: update a set a.pname = b.name from 表a a inner join 表b b on a.pid = b.id MySQL 关联更新 ...
- 3.Vue常用特性
1.表单操作 (1)基于Vue的表单操作 input 单行文本 处理方式就是使用 v-model双向绑定data中的数据 1 <input type="text" v-mod ...
- python中的字符串/列表查找函数小总结
find()和index() 首先是适用情况, 'list' object has no attribute 'find' , list没有find方法, str全有. 返回的情况: 查找成功都会返回 ...
- 重写org.springframework.beans.BeanUtils的copyProperties方法,能在实体映射的时候把纯数字格式的日期转格式
就是在拷贝的时候加个正则的校验,如果是纯数字的日期 就转成yyyy-MM-dd HH:mm:ss的格式原本想直接用注解在实体转格式,但是那样实体会变成日期格式,所以放弃了,直接重写拷贝的方法比较简单 ...
- XML的定义以及XML的编写
什么是XML? 定义 1. XML 是 EXtensible Markup Language 这个单词的简写,中文意思就是:可扩展标记语言. a)可扩展:html 标签是预先定义好的,不能任意定义, ...
- js延迟加载、js异步加载
1.js延迟加载 (1)js延迟加载是js性能优化的一种方式 (2)作用:为了提高网页的加载速度 (3)原理:等网页加载完成之后再加载js文件 ··需要优化的原因:HTML元素是按照其在页面中出现的次 ...