vuedebounce（vuedebounce直接传方法）

本篇文章给大家谈谈vuedebounce，以及vuedebounce直接传方法对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue节流全局指令超级简单
• 2、为什么在vue 2.0 无法使用debounce
• 3、vue防抖指令方法
• 4、43.Vue中使用Lodash 节流（throttle）和防抖（debounce）函数
• 5、vite使用lodash的debounce
• 6、vue如何自定义过滤器

vue节流全局指令超级简单

import Vue from 'vue'

// 自定义防抖

Vue.directive('debounce',{

  inserted: function (el, binding) {

    let timer

    el.addEventListener('keyup', () = {

      if (timer) {

        clearTimeout(timer)

      }

      timer = setTimeout(() = {

        binding.value()

      }, 800)

    })

  }

})

import "@/utils/debounce.js"

对，就这么简单

   el-input v-model="xxx.xxxxx"  v-debounce="自己的方法明并缓名"

    // 节流指令

  directives: {

    debounce: {

      inserted: function (el, binding) {

        let timer

        el.addEventListener('蔽哗keyup', () = {

          if (timer) {

            clearTimeout(timer)

          }

          timer = setTimeout(() = {

            binding.value()

          }, 500)

        })

   激模   },

    },

  }

使用方法：el-input v-model="xxx.xxxxx"  v-debounce="自己的方法名"

import Vue from 'vue'

//按钮节流

const preventReClick = Vue.directive('preventReClick', {

  inserted: function (el, binding) {

    el.addEventListener('click', () = {

      if (!el.disabled) {

        el.disabled = true

        setTimeout(() = {

          el.disabled = false

        }, binding.value || 3000)

      }

    })

  }

});

export { preventReClick }

import { preventReClick }from '@/utils/preventReClick'

Vue.prototype.$preventReClick = preventReClick; // 节流函数

   el-button :@click="getCodeMsgBtn" v-preventReClick按钮/el-button

为什么在vue 2.0 无法使用debounce

1.目前的项目几乎每个页面都用到了1.0的ready钩子函数，然而2.0已废弃不用，进而使用mounted替换，同时还新增了beforeMount、beforeUpdate、updated等，私以为越来明闭越向react看齐了有木有。。

beforeUpdate的作用是在页面初始渲染视图之后，一旦监测到data发生变化，在变化的数据重新渲染视图之前会触发beforeUpdated钩子函数，这也是重新渲染之激明前最后修改数据的机会

update的作用则是在data发生变化渲染更新视图之后触发。

2.同时废弃的激铅裂还有events、$dispatch、$broadcast，官方推荐使用vuex或者全局的事件驱动，然而废弃的这些方法在vux UI框架中很多地方都有使用，无疑在项目中用到它的地方在2.0版本都会不起作用，甚至会报错。

[img]

vue防抖指令方法

1.创建 common.js 文件 

/**

 * @desc 函数防抖

 * @param func 函数

 * @param wait 延迟执行毫秒数

 * @param immediate true 表立即执行，false 表非立即执行

 */

export function debounce(func, wait, immediate = true) {

  let timeout

  return function () {

    if (timeout) clearTimeout(timeout)

    if (immediate) {

      var callNow = !timeout

      timeout = setTimeout(() = {

        timeout = null

      }, wait)

      if (callNow) func.apply(this, arguments)

    } else {

      timeout = setTimeout(function () {

        func.apply(context, args)

      }, wait)

    }

  }

}

2.创建 directives.js文件

import Vue from 'vue'

import { debounce } from '@/plugins/common'

//防抖自定义指令

Vue.directive('debounce',{

    bind(el,binding){

        let executeFunction;

        if(binding.value instanceof Array){//传参

        闭改者    executeFunction = debounce(func,time)

        }else{//不传参

            executeFunction = debounce(binding.value,1000)

        }

       轿薯 el.addEventListener('click',executeFunction);

    }

})

3.main.js 引入 import '@/directives'

4. 使用 v-debounce='click函数不可以带括号 会自动触发歼拆函数'

43.Vue中使用Lodash 节流（throttle）和防抖（debounce）函数

1、节流（throttle）: 创建一个节流函数，在等待时间内最多执行 一次岁丛的函数

2、防抖（debounce）：创建一个 debounced（防抖动）函乎茄樱数，该函数会从上一次被调用后，延纳昌迟多少时间后调用方法，如果不停执行函数，执行时间被覆盖

lodash中文文档

vite使用lodash的debounce

环境：vue3  vite  typescript

1. 安装lodash

npm install lodash

2. 在.vue文件举拆粗中引入

import * as _ from 'lodash'

3. 创建御哗一个变量保存debounce操作

4.在需要调用正镇该操作的地方引用即可

vue如何自定义过滤器

一、什么是过滤器？

过滤器是在数据渲染时，根据使用的过滤器来渲染数据，过滤器不改变真正的data，而只是改变渲染的结果昌喊配，并返回过滤后的版本。

二、过滤器怎样使用？

渲染时使用 “| 过滤器名称”。eg: v-for=”val in arr | filterBy ‘a’ 取包含’a’的渗闹数据

三、常用过滤器介绍

1、debounce ------配合事件，延迟执行

eg: @keyup=”functionname | debounce 2000 ”

2、limitBy 配合数据，限制几条数据

eg: v-for=”val in arr | limityBy 2 1” 从下标为1的元素开始取两条数据

eg: v-for=”val in arr | limityBy 2” 只取前2条数据

3、filterBy 取包含某个元素的数据

eg: v-for=”val in arr | filterBy ‘a’ 取包含’a’的数据

4、orderBy 1（升序）/2（降序）排序

eg: v-for="val in arr | orderBy 1" 升序排序耐指

eg: orderBy 年龄 1 按年龄升序排序

三、自定义过滤器

时间过滤器

div class="box"

关于vuedebounce和vuedebounce直接传方法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。