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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP 面向对象详解
2012/09/13 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
js select option对象小结
2013/12/20 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
JavaScript 截取字符串代码实例
2019/09/05 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
服装店营销方案
2014/03/10 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
医学会议开幕词
2016/03/03 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android