首页 > 其他分享 >Vue常用插件汇集

Vue常用插件汇集

时间:2022-12-16 17:36:57浏览次数:47  
标签:触发 插件 Vue 15 节流 防抖 汇集 lodash

1.复制黏贴插件clipboardjs  (https://clipboardjs.com/#example-text)

2.图片懒加载 vue-lazyload

3.图表 echart

4.数字精度Math,Lodash,moment,mathjs

 lodash是一套工具库,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,还集成有常用的节流,防抖。

math.js可以解决前端金额类计算精度问题

moment.js 处理各种时间格式转换获取

lodash防抖节流(着重讲解下)

应用场景:

当用户高频率的触发事件,事件较短,内部出现卡顿现象

解决方法:
防抖节流

防抖节流功作用:
主要目的是为了降低高频事件触发,减少dom操作或请求次数,提升性能

防抖函数debounce
使用的原理:前面所有的触发,是最后一次执行后在规定的时间内触发(只执行一次)

n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时

举例:
假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制

电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖

当然用地铁可能比较合适,15分钟一趟.

节流函数throttle
使用原理:少量的触发,在规定的时间内是不会重复触发的,只有超过这个事件才会再次的触发

n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效

举例:
假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制

电梯第一个人进来后,15秒后准时运送一次,这是节流

使用方式:
使用lodash插件,安装lodash插件

npm i lodash

引入import _ from 'lodash'

节流

this.right=_.throttle(this.right,1000)

防抖

this.left=_.debounce(this.left,1000)

 

标签:触发,插件,Vue,15,节流,防抖,汇集,lodash
From: https://www.cnblogs.com/xmyfsj/p/16987902.html

相关文章

  • 4399 Flash游戏专用浏览器, 无需安装Flash插件
    目前所有的主流浏览器都已经不再支持Flash了,即使有一些国内浏览器还支持flash,但只能安装国内特供版FlashPlayer.但问题的关键在于,这个国内特供版跟Adobe海外发行的版本......
  • logstash如何离线安装插件
    有的服务器有网络限制没有办法在线安装插件,需要借助其他服务器导出离线安装包1.先找一台没有网络限制的服务器在线安装bin/logstash-plugininstalllogstash-input-log4j......
  • Vue3项目-生成Cron表达式组件
    最近做的一个vue3项目过程中,需要用到cron表达式功能,而对于普通业务人员,他们是不懂cron表达式规则的,所以需要做一个可手动配置生成cron表达式的功能。从网上查找了一些......
  • vue开发过程常用的JSX语法
    参考资料:https://juejin.cn/post/7114063575122984973在Vue项目的开发过程,经常会使用到JSX语法,对常用的JSX语法分类做个笔记,方便需要之时查阅动态绑定class数组形式:......
  • CentOS上安装tree插件获取目录以及子目录下所有文件
    场景在部署系统时需要列出当前目录下以及各个子目录下所有的文件,方便排查文件路径等信息。也对整个项目的目录一目了然。插件安装yum-yinstalltree常用命令tr......
  • firefox浏览器邮件通知插件
    ​​firefox​​​浏览器扩展真的很丰富,这里给大家介绍的是一个邮件通知插件。虽然一些客户端软件都可以实现实时邮件通知,但是我还是不习惯在自己电脑开机运行很多程序。如......
  • vue2 数据响应式原理模拟继续优化
    上次简单的模拟了数据响应式,当我们第一次修改值依赖函数会执行一次,再修改一次值依赖函数会执行两次,这需要做下去重,去掉重复绑定的依赖。采用的方法是给每个dev实例添加一个......
  • vue记录点
    1.vue2路由监听watch:{$route:function(to,from){//事件处理}} 2.vue3路由监听watch(()=>Router.currentRoute.value.path,()=>{......
  • AE中文插件丨红巨星粒子插件套装 Trapcode Suite V2023.1 汉化版
    RedGiantTrapcodeSuite是一套用于3D动画和视觉效果的11种工具。作为Adobe最大的插件商RedGiant公司在业界享有极高的盛誉,其公司出品的四大插件系统基本满足了所有挑......
  • 【转载】安装Axure RP Extension for Chrome插件的简单方法
    在使用Chrome浏览器查看Axure的原型HTML文件时,会提示下载AxureRPExtensionforChrome插件!而插件在Google的服务器上根本下载不了。下面的网文可以让你只需三步,不用下载A......