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 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
微信小程序服务器日期格式化问题
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自带的进位制之间的转换函数
2013/06/08 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
python strip()函数 介绍
2013/05/24 Python
python中文乱码的解决方法
2013/11/04 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
浅谈MySQL中的触发器
2015/05/05 Python
python模拟表单提交登录图书馆
2018/04/27 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
初级Java程序员面试题
2016/03/03 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
中国合伙人观后感
2015/06/02 职场文书