Vue清除定时器优化方案

 this.clock = setInterval(()=>{this.nums = this.nums+1console.log(this.nums)},1000)beforeDestroy(){clearInterval(this.clock)this.clock223 = null}

一个定时器，然后在beforeDestroy中清除，

今天看到有一个优化方案
网上说这个方案的有点千篇一律都是官方文档上的这两句话

1它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

“杂物”的意思就是指在人们生活和工作的环境中存在的无用的,废弃的,多余的,或者暂时不用的,需要清理和整理,或归类整理的各类东西和物品。（说白了就是这么写有点搂）

2我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。

（建立的代码和清理的代码分开写不方便维护）

  getAddNum() {const timer = setInterval(() => {this.nums = this.nums+1}, 500);// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。this.$once("hook:beforeDestroy", () => {clearInterval(timer);});},

建立一个定时任务，然后监听beforeDestroy时清除这个任务，这样就变成了有经验的开发人员
vue官网程序化事件监听链接

Vue清除定时器优化方案相关推荐

Vue清除定时器setInterval优化方案
两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称: data() { return { ...
Vue 项目性能优化方案
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
vue 清除定时器失效 clearInterval
最近需要再页面里做个倒计时,发现用clearInterval()清除定时器失效, 解决办法就是挂载到window上 this.timer = window.setInterval(() => { ...
Vue项目性能优化方案
一.代码层面的优化 1.v-if和v-show的使用场景 (1)v-if适用于在运行时很少改变条件,不需要频繁切换条件的场景,属于真正的条件渲染,会确保在切换过程中,元素适当的被销毁和重建,也是惰 ...
Vue中常见的性能优化，项目优化/单页面性能优化,Vue中六大优化方案
1.编码优化 1. 下里将所有的数据都放在data中,data中的教据都会增加getter和setter,会收集对应的watcher 2. vue在v-for时给每项元素绑定事件需要用事件代理 3. ...
Vue清除定时器方法
方法1 data() { return { timer: null // 定时器名称 } },this.timer = (() => {// 某些操作 }, 1000) beforeDestro ...
vue2.x项目中使用$once清除定时器，理解$once
一.$once的概述使用 $once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除. $once有两个参数,第一个参数为字符串类型,用来指定绑定的事件名 ...
使用vue如何seo优化
1 .首先怎么判断网站是用vue做的,我的方法当然是先搜一搜,当让搜出来的并不一定是,接下来可以用vue-develop这个插件,只要你安装了这个插件,是vue的网站该插件的图标就会点亮 2 .如何 ...
浅谈Vue单页应用首屏加载速度优化方案
心语:最不会利用时间的人,最会抱怨时间不够趁着五一放假,刚好最近天气也是不好,.所以抽出一点时间写一点东西,也算是不辜负这个美好的假期吧!小编也祝愿大家五一快乐,玩得愉快哈随着各大前端框架的诞生以 ...

Vue清除定时器优化方案

Vue清除定时器优化方案相关推荐

最新文章

热门文章