Vue自定義指令封裝節(jié)流函數(shù)的方法示例
節(jié)流函數(shù)是web前端開發(fā)中經(jīng)常用到的一個(gè)開發(fā)技巧,在input實(shí)時(shí)搜索,滾動(dòng)事件等,為了避免過(guò)多消耗性能,我們都會(huì)使用節(jié)流函數(shù).在《JavaScript高級(jí)程序設(shè)計(jì)》一書中有這樣的一個(gè)例子:
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)
}
這個(gè)就是很典型的函數(shù)節(jié)流的應(yīng)用,不多解釋,本文通過(guò)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 () {
// 實(shí)際要進(jìn)行的操作 axios.get('')之類的
this.count++
console.log('count is:' + this.count)
}
}
}
</script>
以上代碼實(shí)現(xiàn)了一個(gè)實(shí)時(shí)搜索類的函數(shù)節(jié)流,通過(guò)vue自定義指令v-debounce實(shí)現(xiàn).原本,如果我們想做一個(gè)實(shí)施搜索,那么會(huì)直接用@keyup=search,這樣就會(huì)非常耗性能,鍵盤敲一下,就會(huì)調(diào)用一次search事件,如果是ajax請(qǐng)求,那么會(huì)非常不友好,所以通過(guò)v-debounce,則可以在鍵盤連續(xù)敲擊的時(shí)候組織運(yùn)行,停留300毫秒才執(zhí)行.
通過(guò)vue的自定義指令,還可以將其掛載在全局,那樣就能全局通過(guò)v-debounce調(diào)用了.這個(gè)比傳統(tǒng)方法簡(jiǎn)單很多,不需要call,apply之類的.
關(guān)鍵點(diǎn):vue 的自定義指令傳遞的參數(shù)binding 如果是一個(gè)函數(shù),則通過(guò)binding.value()來(lái)執(zhí)行,通過(guò)上述示例,還可以傳遞比如事件, 綁定對(duì)象之類的,上例綁定的是el, keyup事件,這些也可以通過(guò)binding傳遞,通過(guò)vue的自定義指令,可以簡(jiǎn)化很多重復(fù)代碼,并且邏輯更加清晰
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法
Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。下面通過(guò)本文給大家介紹vue.js ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2016-10-10
flask和vue前后端分離項(xiàng)目部署的示例代碼
本文主要介紹了flask和vue前后端分離項(xiàng)目部署的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue.js2.0 實(shí)現(xiàn)better-scroll的滾動(dòng)效果實(shí)例詳解
better-scroll 是一個(gè)移動(dòng)端滾動(dòng)的解決方案，它是基于 iscroll 的重寫。better-scroll 也很強(qiáng)大，不僅可以做普通的滾動(dòng)列表，還可以做輪播圖、picker 等等，下面通過(guò)本文給大家介紹vue.js2.0 實(shí)現(xiàn)better-scroll的滾動(dòng)效果，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue的watch和watchEffect，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue測(cè)試環(huán)境打包與生產(chǎn)環(huán)境打包文件數(shù)量不一致解決方案
這篇文章主要為大家介紹了vue測(cè)試環(huán)境打包與生產(chǎn)環(huán)境打包文件數(shù)量不一致的解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式
這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫(kù)、自定義組件以及通過(guò)插件簡(jiǎn)化項(xiàng)目構(gòu)建過(guò)程,這篇文章給大家介紹了Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程,需要的朋友可以參考下2024-07-07
vue使用swiper實(shí)現(xiàn)左右滑動(dòng)切換圖片
這篇文章主要為大家詳細(xì)介紹了vue使用swiper實(shí)現(xiàn)左右滑動(dòng)切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
項(xiàng)目中一鍵添加husky實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了項(xiàng)目中一鍵添加husky實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue.js使用3DES加密的方法,結(jié)合實(shí)例形式分析了vue.js使用3DES加密的具體操作步驟與使用技巧,并提供了CryptoJS-v3.1.2的本地下載,需要的朋友可以參考下2018-05-05