专栏首页方球debounceHook Vue 防抖值 hook

debounceHook Vue 防抖值 hook

使用例子

<template>
  <div class="home">

    <div>
      <Card style='margin: 20% auto; width: 600px' title=''>
        <h2> {{ state.name }} </h2>
        <div> default:  {{ state.age }} </div>
        <div> throttle: {{ info }} </div>
        <Button @click='add' > add </Button>
      </Card>
    </div>
    
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api'
// import throttleHook from '@/hooks/throttleHook'
import debounceHook from '@/hooks/debounceHook' 

export default {

  setup(){
    const state = reactive({name: 'jeck', age: 23})
    const add = () => state.age += 1
    const [ info ] = debounceHook(() => state.age, 1000)

   return {
     add,
     state,
     info,
   }

  }

}
</script>

实现

import { ref, watch } from '@vue/composition-api'
import debounceFnHook from './debounceFnHook.js'


/**
 * 防抖值hook 
 * @param { Function } watchFn 观察函数 
 * @param { Number } wait 时间间隔 ms 
 * @return { [ state, setState ] } state 间隔数据, setState 防抖函数
 * @example
 * 
 * const count = ref(1)
 * const add = () => count.value += 1
 * const [ state ] = debounceHook(() => count.value)
 * 
 */
export default function debounceHook(watchFn, wait){
    const state = ref(watchFn())
    const { run:setState } = debounceFnHook(data => state.value = data, wait)
    
    watch(watchFn, (val) => setState(val) )

    return [ state, setState ]
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • throttleHook Vue 节流值 hook

    copy_left
  • throttleFnHook Vue 函数节流Hook

    copy_left
  • setHook

    copy_left
  • React+Redux的一个简单开发实例

    看到这个水果篮子的样子,大家应该可以明白它的功能:你可以做两件事 — 摘苹果和吃苹果。当你摘苹果时,应用会向后台发送ajax请求索取苹果,每个苹果有两个属性:编...

    javascript.shop
  • 真正掌握vuex的使用方法(四)

    是不是很长?是不是看着它很蓝瘦? 正常的第一反应就是将其写入到计算属性内,方便调用!所以咱们可以将computed调整如下:

    用户1272076
  • Vuex使用

    程序员不务正业
  • 慧辰资讯发布半年报 大数据业务实现盈利

    本文由界面新闻(jiemian.com)授权转载。 传统意义上,公众对于大数据行业的更多理解是处于烧钱的模式,花的比赚的多。但是新三板上挂牌企业慧辰资讯,长期从...

    数据猿
  • 中国信通院发布《云计算发展白皮书(2019年)》(附PPT解读)

    导读:2019年7月2日,中国信息通信研究院(以下简称“中国信通院”)发布了《云计算发展白皮书(2019)》。这是继《云计算白皮书(2012年)》之后,中国信息...

    华章科技
  • 大数据改变的不只是商业,更重要的是思维

    自从进入大数据行业,被问及最多的问题,一是大数据是什么,二是大数据能干什么,三是我周围哪里用到了大数据 对于前两个问题,小编经常就随便糊弄过去,毕竟学术界都还每...

    BestSDK
  • ES6箭头函数有什么不一样?

    在JS中,箭头函数可以像普通函数一样以多种方式使用。但是,它们一般用于需要匿名函数表达式,例如回调函数。

    Fundebug

扫码关注云+社区

领取腾讯云代金券