Vue程序化的事件监听器(实例方案详解)


Posted in Javascript onJanuary 07, 2020

 某些第三方插件必须在当前组件卸载后清除该实例(比如说百度的富文本框UEditor 如果不清除再次在下个组件使用时会有bug, 类似于小程序的语音实例,必须离开页面的时候销毁当前语音实例,不然语音会一直播放)

方案1:

data() {      
  return {               
    timer: null // 定时器名称     
  }    
},

然后这样使用定时器:

this.timer = setIterval (() => {
  // 某些操作
}, 1000

最后在beforeDestroy()生命周期内清除定时器:

beforeDestroy() {
  clearInterval(this.timer);    
  this.timer = null;
}

这次方案有两点不好的地方,引用尤大的话来说就是:

(1)它需要在这个组件实例中保存这个数据timer,这是多余的。
(2)我们的建立定时器代码独立于我们的清理代码(定时器需要卸载页面的时候卸载),这使得我们比较难于程序化的清理我们建立的所有东西(意思是执行代码和清除代码不在一起)。

方案2: 该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码:

mounted: function () {
 const timer = setInterval(() =>{          
   // 某些定时器操作        
 }, 500);      
 // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
 this.$once('hook:beforeDestroy', () => {      
   clearInterval(timer);                  
 })
}

简单来说就是把所有创建实例和需要销毁的实例代码放在一起了,放在一起而已(创建实例和销毁实例)……..

甚至可以在一个页面开启多个这种创建实例和销毁实例

mounted: function () {
 this.attachDatepicker('startDateInput')
 this.attachDatepicker('endDateInput')
},
methods: {
 attachDatepicker: function (refName) {
  var picker = new Pikaday({
   field: this.$refs[refName],
   format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () {
   picker.destroy()
  })
 }
}

综合来说,我们更推荐使用方案2,使得代码可读性更强,一目了然。如果不清楚 $once、$on、$off 的使用。

总结

以上所述是小编给大家介绍的Vue程序化的事件监听器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
微信小程序服务器日期格式化问题
Jan 07 #Javascript
webpack 最佳配置指北(推荐)
Jan 07 #Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 #Javascript
vue实现数据控制视图的原理解析
Jan 07 #Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 #Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 #Javascript
小程序跨页面交互的作用与方法详解
Jan 07 #Javascript
You might like
php过滤表单提交的html等危险代码
2014/11/03 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python数据结构之图的应用示例
2018/05/11 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
简述python Scrapy框架
2020/08/17 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
运动会闭幕式解说词
2014/02/21 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
小英雄雨来观后感
2015/06/09 职场文书
python 镜像环境搭建总结
2022/09/23 Python