首页 / VUE / Vue自定义指令封装节流函数的方法示例
Vue自定义指令封装节流函数的方法示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue自定义指令封装节流函数的方法示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1748字,纯文字阅读大概需要3分钟。
内容图文
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子:
function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv () { var div = document.getElementById('myDiv') div.style.height = div.offsetWidth + 'px' } window.onresize = function () { throttle(resizeDiv) }
这个就是很典型的函数节流的应用,不多解释,本文通过vue的自定义指令封装类似的方法.
<template> <div> <input type="text" v-model="text" v-debounce="search" > </div> </template> <script> export default { name: 'debounce', data () { return { msg: 'Welcome to Your Vue.js App', text: '', count: 1 } }, directives: { debounce: { inserted: function (el, binding) { let timer el.addEventListener('keyup', () => { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { binding.value() }, 300) }) } } }, methods: { search () { // 实际要进行的操作 axios.get('')之类的 this.count++ console.log('count is:' + this.count) } } } </script>
以上代码实现了一个实时搜索类的函数节流,通过vue自定义指令v-debounce实现.原本,如果我们想做一个实施搜索,那么会直接用@keyup=search,这样就会非常耗性能,键盘敲一下,就会调用一次search事件,如果是ajax请求,那么会非常不友好,所以通过v-debounce,则可以在键盘连续敲击的时候组织运行,停留300毫秒才执行.
通过vue的自定义指令,还可以将其挂载在全局,那样就能全局通过v-debounce调用了.这个比传统方法简单很多,不需要call,apply之类的.
关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的,上例绑定的是el, keyup事件,这些也可以通过binding传递,通过vue的自定义指令,可以简化很多重复代码,并且逻辑更加清晰
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的Vue自定义指令封装节流函数的方法示例全部内容,希望文章能够帮你解决Vue自定义指令封装节流函数的方法示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。