有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue防抖函数使用(lodash库实现防抖)

代码编程 炮渣日记 3周前 (11-08) 21次浏览 已收录 0个评论 扫描二维码

首先使用npm下载lodash库

$ npm i –save lodash

接着便可在vue中使用lodash实现防抖函数,代码如下

<template>
  <div class="hello" @click="debounceClick"></div>
</template>

<script>
  // 使用import将lodash库引入
  import lodash from 'lodash';
  
  export default {
    data() {
      return {
        testData: 'testData', // 测试数据
      }
    },
    created() {
      // 在复用时,为了使组件实例彼此独立,可以在生命周期钩子的 created 里添加防抖函数
      this.debounceClick = lodash.debounce(this.twoE,500);
    },
    unmounted() {
      // 移除组件时,取消定时器
      this.debounceClick.cancel();
    },
    methods: {
      twoE() {
        // do something...
        console.log(this.testData);
      },
    }
  }
</script>

<style scoped>
  .hello {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址