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 相关文章推荐
jq选项卡鼠标延迟的插件实例
May 13 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
通过JS判断网页是否为手机打开
Oct 28 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判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
《记承天寺夜游》教学反思
2014/02/16 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
最常使用的求职信
2014/05/25 职场文书
经典团队口号大全
2014/06/21 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
zabbix配置nginx监控的实现
2022/05/25 Servers